基本 SVG - 如何嵌套元素？

Question

我真的对 SVG 一无所知，但我需要将它用于我正在构建的应用程序。因此，非常感谢您对入门的帮助。

我想在 SVG 形状内嵌套一个 div，我想它会像这样工作：

<svg width="250" height="250" viewBox="0 0 250 250">
  <rect x="0" y="0" width="100" height="100" fill="red">
    <foreignObject width="100%" height="100%">
      <div>TEST</div>
    </foreignObject>
  </rect>
</svg>

但如您所见，它只呈现rect 元素。

即使我尝试只使用text，它仍然不会出现，如您所见：

<svg width="250" height="250" viewBox="0 0 250 250">
  <rect x="0" y="0" width="100" height="100" fill="red">
    <text x="50%" y="50%">TEST 2</text>
  </rect>
</svg>

那么我在这里做错了什么？为什么 SVG 元素嵌套在其他 SVG 元素中时不出现？我怎样才能让他们这样做？

谢谢

Answer 1

SVG 只允许specific elements to be containers。一些最常见的通常使用<g> 元素和<svg> 元素。其他容器用于特定目的。

所有 SVG 元素基本上都是绝对定位的，SVG 中没有reflow 的概念，因此您可以将事物作为兄弟姐妹放置并放置在您想要的任何位置。您根本不需要像在 HTML 中那样嵌套东西。