SVG "autocrop" 算法。首选命令行

Question

我收集了大量 SVG 文件，这些文件的大小（em 或英寸）准确，但外部边距可变 space。里面有各种各样的绘图元素，应用了变换。有没有工具或代码算法可以解析svg元素，将最高和最低vertical/horizontal限制相加，并用总计调整svg元素中的viewbox/width/height元素...有效自动裁剪在不扭曲图像大小的情况下将 svg 绘制到所绘制内容的边缘。

注意：这些 pdf 是使用 pdf2svg 创建的。我尝试在那里搜索可能的功能，但错过了可能已经这样做的任何功能。

示例输入：

<svg height="100" width="100" viewbox="0 0 100 100>
  <circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="red" />
</svg>

示例输出：

<svg height="66" width="66" viewbox="17 17 66 66>
  <circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="red" />
</svg>

这是一个简化的例子，希望我的脑洞是准确的，但第一行 svg 元素只是改变了，尽可能地缩小 svg，同时仍然允许 stroke-width=3 完全显示在图片。

我理论上知道如何做到这一点，但问题的本质似乎“非常详尽并且容易出现围绕矩阵数学和 svg xml 实现的错误，并且足够必要可能已经实现，所以创建它可能是在重新发明轮子

Answer 1

如果可以运行 javascript，您可以使用 getBBox()：

const s = document.querySelector('svg');

const r = s.getBBox({stroke: true});
s.setAttribute('viewBox', `${r.x} ${r.y} ${r.width} ${r.height}`);

<svg height="100" width="100" viewbox="0 0 100 100">
  <circle cx="50" cy="50" r="30" stroke="black" stroke-width="3" fill="red" />
  <rect x="20" y="10" width="30" height="30" fill="blue" transform="rotate(45) translate(20)"/>
  <rect id="BB" x="50" y="50" width="2" height="2" 
stroke="red" fill="yellow" opacity="0.4"/>
</svg>
</svg>

请注意，有一些垂直间距。原因是我们给 svg 赋予了 width 和 height 属性，边界矩形的比例不一样。此外，stroke: true 选项似乎被 Chrome 忽略，因为它是实验性的。在那种情况下，笔划可能会被裁剪。

SVG "autocrop" 算法。首选命令行

SVG "autocrop" algorithm. commandLine preferred

xml

algorithm

command-line

svg

matrix-multiplication