根据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的答案类似，但获得最大视口区域的更好方法是使用getBBox函数：

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

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

n.b。我认为你可以在渲染后改变svg的视图框，这样你就不得不重新渲染svg。

Answer 2

好的，所以我按照以下方式解决了这个问题：

1. 删除了路径字符串中的所有字母，并使用

   创建了一个数组

   var values = pathValue.split('L').join(' ').split('M').join(' ').split('z').join('').split(' ');

2. 从这些值中找到了最大值和最小值：

   var max = Math.max.apply( Math, values );

   var min = Math.min.apply( Math, values );

3. 设置viewBox：

   viewBox = max min max max

这在我的案例中很有效。希望它对其他人也有帮助。