根据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;

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

我认为你可以在渲染后更改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. 设置视图框：

   视图框 = 最大最小最大最大

这对我来说效果很好。希望它对其他人也有帮助。