作为容器的SVG元素？

Question

我有一个由svg rect标签制成的矩形，现在想嵌入一个圆圈。我发现svg元素不能包含子元素，或者我猜我会得到适当的例子。请让我知道是否可以将一个元素作为一个孩子放入另一个元素，然后可见。可能是更高的Z指数？如何使用拉斐尔？

Answer 1

只需将该圆圈添加为rectange的后续兄弟，并将其绘制在顶部。如果你想让矩形在圆圈后面画圆。它被称为油漆工模型，因为你最后绘制的任何东西都是最重要的。

SVG目前没有z-index属性，虽然有建议将它添加到即将推出的SVG 2.0规范中。

如果您想了解SVG那里，如果你有兴趣创建复杂的形状是一个online primer

Answer 2

，paths提供了很多的可能性。您可以获得rect和circle基元具有的持久状态，属性可塑性和交互性（单击，悬停，拖动），但对区域复杂性没有限制。

作为一个额外的好处，聪明地选择路径，你可以从一个形状干净地变形到另一个。例如，检查this fiddle。

有很多用于构建复杂路径的辅助工具...对于大多数项目，Google的SVG-edit就足够了。

Answer 3

SVG组标签<g>看起来像是最容易与HTML的<div>容器标签等效。

从https://developer.mozilla.org/en-US/docs/Web/SVG/Element/g：

的克元件是用于组对象的容器。应用于g元素的转换在其所有子元素上执行。

允许内容：任意数量的以下元素中的，以任何顺序