我们如何自动将不同的 SVG 路径居中到它们的视口中？

Question

希望有人可以提供帮助，我已经为此困扰了几天。

我们允许我们的用户在后台管理中上传他们自己的 SVG 图标作为 SVG 路径，以便我们可以在不同语言的触摸应用程序中使用这些路径（因此我们可以根据交互对路径进行着色、填充或不填充） . （所以不，我们不能使用 PNG）。

现在我们正在尝试在 Web 视图中呈现路径，以便我们可以列出现有图标。
但路径完全不同，坐标有时从 0,0 开始，有时从画布中心（通常在 Illustrator 下创建），所以我们有不同大小和不同对齐方式的图标。

• 有些很小，从 0,0 开始
• 有些很宽，从 500,200 开始

示例： small icon --- Big icon

我需要将它们全部设置为正方形，居中，相同大小（应该可以，毕竟它们只是矢量）

expected result

我试图操纵视口坐标，但它确实是经验性的，我真的不明白我在做什么（只是改变平移和缩放直到它起作用），但这取决于每个图标，我需要找到所有图标的解决方案。 然后我尝试了另一种带有背景的方法（这似乎是一个非常好的技巧）

我将 SVG 路径设置为背景，并尝试使图像居中。有效 ！ （不料） 但它仅适用于大于视口的图标。如果图标很小，它就会一直向左站立。 这是我的 5 个测试

https://codepen.io/XavDeb/pen/zQPZXz

HTML

    <!-- background test 2 -->
    <div class="float">background test glass plate <br>
      <div id="background2">2 </div>
    </div>

CSS

svg {
  width : 200px;
  height : 200px;
  border:solid black;
}
#background2 {
  width : 200px;
  height: 200px;
  border : solid 1px blue;
  background-image : url('data:image/svg+xml;charset=UTF-8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 600 100"><path d="M 323.423,59.2223L 319.407,59.2223C 318.136,59.2223 317.157,58.1303 317.279,56.8649C 317.655,52.9329 317.249,43.9009 309.957,28.4276C 309.661,27.8009 310.431,27.2089 310.945,27.6743C 315.561,31.8516 325.4,45.3969 325.06,54.3369C 325.06,57.8969 325.061,56.3969 325.063,57.5876C 325.064,58.4943 324.329,59.2223 323.423,59.2223 Z M 303.227,16.2969C 300.342,15.7223 297.363,15.4169 294.309,15.4169C 291.14,15.4169 288.047,15.7436 285.06,16.3623L 285.06,7.25027C 285.06,6.2116 285.937,5.33294 286.976,5.33294L 301.309,5.33294C 302.349,5.33294 303.227,6.2116 303.227,7.25027M 343.393,57.8329L 339.617,57.8329C 338.391,39.0489 325.751,23.3889 308.56,17.7103L 308.56,7.25027C 308.56,3.26227 305.297,-0.000396729 301.309,-0.000396729L 286.976,-0.000396729C 282.989,-0.000396729 279.727,3.26227 279.727,7.25027L 279.727,17.8236C 262.705,23.5929 250.221,39.1716 249.003,57.8329L 245.393,57.8329C 243.193,57.8329 241.393,59.6329 241.393,61.8329C 241.393,64.0329 243.193,65.8329 245.393,65.8329L 343.393,65.8329C 345.593,65.8329 347.393,64.0329 347.393,61.8329C 347.393,59.6329 345.593,57.8329 343.393,57.8329 Z" ></path></svg>');

  background-repeat : repeat;
  background-position: center;
  background-color :green;
  background-size : cover;

} 

这几乎可以工作，但带有小图标的相同代码根本不起作用。

有什么方法可以成功我正在尝试做的事情吗？ （或者我应该只是重新路径所有图标）

Answer 1

您在该 CodePen 中使用的某些方法（例如 background-image）实际上无法在运行时进行修改以自动缩放您的 SVG。

但对于内联 SVG，您可以执行以下操作：

var PADDING = 0.2;  // 20% padding on all sides
var svgElements = document.querySelectorAll('.float > svg'); 
svgElements.forEach(function(svg) {
  var bbox = svg.getBBox();
  var padX = PADDING * bbox.width;
  var padY = PADDING * bbox.height;
  var viewbox = [bbox.x - padX, bbox.y - padY,
                 bbox.width + 2*padX, bbox.height + 2*padY].join(' ');
  svg.setAttribute('viewBox', viewbox);
});

示例代码笔：https://codepen.io/PaulLeBeau/pen/ZNvzzp

它应该适用于大多数精心制作的 SVG。但它不能自动修复坏的 SVG。就像你的最后两个。这似乎有不好的<pattern> 定义。