如何让SVG容器拥抱其内容？

Question

我正在开发一个项目，根据用户提供的输入自动生成一些SVG标记。例如，我最常见的情况是我可能在<svg>容器内有许多SVG对象（即矩形，椭圆形，多边形等）。

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

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

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

注意：我不知道哪些形状将被放入SVG容器内以及它们将被放置在何处。此外，SVG中可以包含另一个<svg>标记，并且形状可以位于此内部SVG内。

注2：在某些情况下，可能需要增加SVG容器的宽度和高度，以便不截断内容。 Alos，为了证明原因，我必须使用纯HTML / CSS解决方案。

Answer 1

好吧，如果我理解得很好，那么你想要'svg标签'的确切'高度'和'宽度'，其中'孩子'居住。

一种可能的解决方案是： -

（假设你的svg位于0,0）

1. 你需要跟踪你的svg中绘制的元素（我希望你已经这样做了）。
2. 然后你需要使用'getBbox（）'来获得'height'和'width'
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。

中创建任何元素时，您都需要执行上述步骤