Question

我有一个简单或复杂的SVG图形。例如旋转的矩形。如果不进行计算，您将无法知道图形完全适合的视图框的最小大小。

<svg viewBox="0 0 30 30">
<rect x="20" y="0" width="100" height="20" transform="rotate(45)" fill="black" />
</svg>

结果是图形不适合视图框。

有什么方法可以使视图框的尺寸最小化，从而完全显示图形？

理想情况下，我不想声明视图框的大小/比率。我只希望最小尺寸是SVG图形内容的结果。

当我完全不声明viewBox属性时，有什么缺点吗？

感谢您的帮助。

Answer 1

一种实现方法是将转换后的矩形包装在<g>元素中，然后获取theG的边界框的值。接下来，使用边界框（{{1}}）的值重置BB的{{1}}。希望对您有所帮助。

viewBox

theSVG

// the bounding box for the wrapping g
let BB = theG.getBBox();


theSVG.setAttributeNS(null, "viewBox", `${BB.x} ${BB.y} ${BB.width} ${BB.height}`)

如何自动创建适合整个内容的最小尺寸的视图框？

1 个答案: