SVG内的中心路径

Question

是否可以在 SVG 元素中垂直居中路径？

这是我需要居中的路径之一：

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144"><path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg>

Answer 1

如果你的意思是自动，没有干预，那么没有。 但是，您可以将路径中的变换添加到SVG中心。

路径的边界框是：

{
   x: 8.859999656677246,
   y: 40.347999572753906,
   width: 125.81500244140625,
   height: 94.6520004272461
}

文档的高度为144，因此y实际应为：

(144 - 94.652) / 2 = 24.674

所以路径的y位置必须通过以下方式调整：

(24.674 - 40.348) = -15.674

因此，将以下属性添加到path元素：

transform="translate(0, -15.674)"

演示前后：

 <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 144 144" style="background-color: gray"><path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg> <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300" viewBox="0 0 144 144" style="background-color: gray"> <path transform="translate(0, -15.674)" d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/></svg> 

Answer 2

您可以更改svg viewBox属性以使路径居中。 如果您在 svg 中有多个路径，这将特别有用，因此您不必为每个路径添加转换。

viewBox属性的值是四个数字的列表： min-x min-y width height 。 数字指定用户空间中的一个矩形，该矩形映射到为关联的 SVG 元素建立的视口边界

在您的示例中，这将是viewBox="0 15.674 144 144" ，以与 Pauls 回答相同的方式获得 y 偏移量。

之前和之后的演示：

 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144" width="300" height="300" style="background-color: gray"> <path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/> </svg> <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 15.674 144 144" width="300" height="300" style="background-color: gray"> <path d="M127.782 40.348H15.802c-3.813 0-6.912 3.002-6.912 6.766v14.113c0 3.235 1.52 6.11 3.953 7.92h-.012s52.9 35.873 53.09 36c1.56.978 3.82 1.886 5.82 1.886 2.21 0 4.25-.71 5.9-1.886l52.54-35.675c2.69-1.78 4.494-4.81 4.494-8.246V47.194c0-3.772-3.07-6.846-6.885-6.846zm-38.05 29.864c-.066 1.966-.685 3.392-2.68 3.392H64.744c0 4.482 4.56 6.735 8.77 6.735 7.825 0 9.407-4.4 12.117-3.34 1.49.58 2.14 1.62 2.11 3.62-.08 4.48-5.292 7.864-14.94 7.864-11.637 0-19-6.573-19-17.353 0-10.31 7.63-17.88 18.184-17.88 10.465 0 17.757 7.04 17.757 16.74v.215zm-17.91-8.494c-3.434 0-6.28 2.284-6.695 5.597h13.47c-.068-3.45-3.116-5.597-6.776-5.597zm-.087 53.697c-3.328-.038-6.947-1.51-8.567-2.805L8.86 75.7v52.492c0 3.764 3.065 6.808 6.88 6.808h111.983c3.824 0 6.944-3.044 6.944-6.808v-52.49L80.53 112.61c-2.586 1.832-5.636 2.84-8.795 2.805z"/> </svg>