SVG 元素作为容器

SVG element as a Container?

本文关键字：元素 SVG      更新时间：2023-09-26

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

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

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

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

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

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

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

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

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

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

有许多用于构建复杂路径的辅助工具... 对于大多数项目来说，谷歌的SVG编辑是完全足够的。

相关文章：