svg - 根据 SVG 中的路径元素计算 viewBox 参数

Question

我得到一个只有路径的 XML 或 JSON，我需要重新创建 SVG 图像。

我创建一个空
<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg> ,

我添加了 <g transform="scale(1 -1)" fill='#aaa' stroke='black' stroke-width='5' ></g>在其中，然后在此元素中添加其中的所有路径(例如 <path d= ... /> )。

最后我得到了一个 SVG 图像，但是因为我没有在 SVG 元素中设置 viewBox 属性，所以图像没有正确显示——当我在浏览器中打开它时，它的一部分显示为全尺寸。

可以根据路径中的值计算 viewBox 吗？

谢谢!

Answer 1

类似于 Martin Spa 的回答，但获得最大视口(viewport)区域的更好方法是使用 getBBox 函数:

var clientrect = path.getBBox();
var viewBox = clientrect.x+' '+clientrect.y+' '+clientrect.width+' '+clientrect.height;

然后，您可以将 View 框设置为这些坐标。

注意我认为您可以在渲染后更改 svg 的 View 框，因此您可能必须重新渲染 svg。