javascript - SVG元素作为容器？

Question

我有一个由 svg rect 标签制成的矩形，现在想在其中嵌入一个圆圈。我发现 svg 元素不能包含子元素，或者我想我会得到适当的例子。请让我知道是否有可能在小时候将一个元素融入另一个元素，然后太明显了。可能具有更高的 z-index？怎么可能使用拉斐尔？

Answer 1

只需将圆圈添加为矩形的后续兄弟，它就会在顶部绘制。如果你想让矩形画在圆圈上，你可以把它放在圆圈后面。它被称为画家模型，因为你最后画的任何东西都在其他一切之上。

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

如果你想学习 SVG，有一个在线入门

Answer 2

SVG 组标签<g>似乎最等同于 HTML 的<div>容器标签。

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

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

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

Answer 3

如果您对创建复杂的形状感兴趣，路径提供了很多可能性。您将获得与 rect 和 circle 基元相同的持久状态、属性延展性和交互性（单击、悬停、拖动），但对区域复杂性没有限制。

作为额外的奖励，通过巧妙选择的路径，您可以从一种形状干净地变形为另一种形状。例如，检查这个小提琴。

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