html - 如何将 div 标签包裹在 svg 标签内

Question

是否可以将 div 标签包裹在 svg 标签内？

这是我到目前为止所拥有的......

<div>
    <svg  style="width: 50px;height: 50px;border: solid black;">
        <div style="fill: blue;text-decoration: black">test</div>
    </svg>
</div>

我看不到内部div标签的内容。右键单击 Firefox 浏览器中的内容即可显示该内容。

有什么方法可以正确显示div吗？

Answer 1

如果您想在某些 SVG 内容中显示 div，则需要使用foreignObject 标签包裹该 div。

这是添加了foreignObject 标记的标记。我还更正了内部 div 中的 CSS 属性，以便它们执行某些操作。

<div>
  <svg  style="width: 50px;height: 50px;border: solid black;">
    <foreignObject width="100%" height="100%">
      <div style="background-color: blue;text-decoration: underline">test</div>
    </foreignObject>
  </svg>
</div>