如何将 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>