Question

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

我想将div嵌套在SVG形状中，我想它会像这样工作：

<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仅允许https://github.com/GStreamer/gst-plugins-good/blob/master/tests/icles/test-segment-seeks.c。通常，一些最常见的元素使用<g>元素和<svg>元素。其他容器用于特定目的。

所有SVG元素基本上都是绝对定位的，SVG中没有specific elements to be containers的概念，因此您可以将事物作为同级放置并放置在所需的任何位置。您完全不需要像在HTML中那样嵌套东西。

基本SVG-如何嵌套元素？

1 个答案: