SVG元素作为容器？

Question

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

Answer 1

只需将圆圈添加为矩形的后续兄弟，它将在顶部绘制。如果您希望矩形在圆上绘制，则将其放在圆圈后面。它被称为画家模型，因为你最后画的是其他一切。

SVG目前没有z-index属性，尽管有人建议将其添加到即将发布的SVG 2.0规范中。

如果您想学习SVG，可以使用online primer

Answer 2

SVG群组标记<g>似乎与HTML的<div>容器标记最相同。

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

  

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

     

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

Answer 3

如果您对创建复杂形状感兴趣，paths提供了很多可能性。您可以获得矩形和圆形图元具有的相同持久状态，属性可延展性和交互性（单击，悬停，拖动），但不会限制区域复杂性。

作为一个额外的好处，通过巧妙选择的路径，您可以从一种形状干净地变形到另一种形状。例如，请检查this fiddle。

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