html - 如何让 SVG 容器拥抱它的内容？

Question

我正在做一个元素，其中一些 SVG 标签是根据用户提供的输入自动生成的。例如，我最常见的情况是我可能在 <svg> 中有许多 SVG 对象(即矩形、椭圆、多边形等)。容器。

现在的问题是，无论内容如何，​​我的容器 SVG 都有一定的长度和宽度。我试图让我的容器 SVG 标签只有这么多的长度和宽度，以便它可以包含它的内容但没有空格。

例如:in this fiddle带有 id=svg1 的 SVG比其内容需要的要大得多。

如何制作合适大小的 SVG 容器？

注意:我不知道哪些形状将被放入 SVG 容器中以及它们将被放置在哪里。此外，SVG 可以包含另一个 <svg>它里面的标签和形状可以在这个内部 SVG 中。

注意 2:在某些情况下，可能需要增加 SVG 容器的宽度和高度，以免截断内容。另外，出于某些原因，我必须只使用纯 HTML/CSS 解决方案。

Answer 1

好吧，如果我理解得很好，那么您希望您的“svg 标签”具有准确的“高度”和“宽度”，它的“子”位于其中。

一个可能的解决方案是:-

(假设您的 svg 位于 0,0)

1. 您需要跟踪在您的 svg 中绘制了哪个元素(我希望您已经这样做了)。
2. 然后你需要使用'getBbox()'来获取它的'高度'和'宽度'
3. 现在您需要计算“子”元素相对于位置 (0,0) 的准确位置。

举个例子

var svgwidth=500;
var svgheight=500;

<svg id="svg1" width="500" height="500">
</svg>

现在假设用户在其中绘制一个矩形。

<rect id="rect1" x="0" y="0" height="200" width="300"></rect>

现在我们需要确定“svg”的确切“宽度”和“高度”。

var rect1=document.getElementById('rect1');
var bbox=rect1.getBBox();

var widtharea=bbox.x+bbox.width;
var heightarea=bbox.y+bbox.height;

现在比较'widtharea'和'svgwidth'，如果它比'svgwidth'大，更新'svgwidth'的值。类似地比较 'heightarea' 和 'svgheight'

每次用户在 svg 中创建任何元素时都需要执行上述步骤。