7

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

我创建一个空

<svg xmlns='http://www.w3.org/2000/svg' version='1.1'></svg>,

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

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

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

谢谢！

4

2 回答 2

15

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

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

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

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

于 2012-04-21T13:47:10.700 回答
3

好的，所以我通过以下方式解决了它：

  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 = max min max max

这在我的情况下非常有效。希望它对其他人也有帮助。

于 2012-04-06T13:19:10.907 回答