基本 SVG - 如何嵌套元素？

Posted 2023-02-21

【中文标题】基本 SVG - 如何嵌套元素？

【英文标题】：Basic SVG - How to nest elements?

【发布时间】：2019-06-01 14:33:05

【问题描述】：

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

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

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

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

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

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

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

谢谢

【问题讨论】：

那么这并不能真正解决嵌套问题，因为矩形会自动关闭并且无法嵌套子级，对吧？

【参考方案1】：

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

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

【讨论】：

感谢您的信息。那么你会如何推荐定位兄弟元素，以便一个总是在另一个元素之内呢？因为最终我要拖动容器元素，我希望内容也随之拖动

你必须在拖拽代码中实现一些特定的逻辑，以防止应该留在较大元素内的元素被重新定位，使其出现在外面。

我明白了。感谢您的帮助

@RobertLongson 是否可以向您发送一封关于潜在咨询工作的快速电子邮件？在您的网站上找不到联系信息。当你看到这个时请注意，这样评论可以被删除而不会使页面混乱。非常感谢您过去提供的所有帮助以及对 SVG 的贡献。