SVG内的中心路径答案

【问题标题】：Center Path inside SVGSVG内的中心路径
【发布时间】：2015-04-22 20:25:49
【问题描述】：

是否可以在 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>

【问题讨论】：

icomoon 有一个很棒的工具可以将路径居中到任何方向

标签： html xml svg path

【解决方案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

所以在路径元素中添加以下属性：

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>

【讨论】：

这适用于这个图标...我还有 300 个不同高度的图标。有没有一种快速的方法可以自动将此方法应用于所有这些？我看到 SVGO 提供了一个“垂直对齐”插件，但我似乎无法让它工作。
通过对源代码的简要检查，该插件似乎要求 SVG 具有“高度”属性，而您的则没有。也许有一个插件（或者你可以写一个）在应用垂直对齐之前添加一个适当的高度（在本例中为 144）。然后再次删除高度。

【解决方案2】：

您可以更改svg viewBox attribute 以使路径居中。如果您在 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>

【讨论】：