如何在 SVG 标签之间嵌入 html 代码

Question

我的应用程序是在 VML 中，这允许我在 VML 标签之间嵌入 html。但是 VML 只支持到 IE-8。现在我已经使用 vectorconverter 将 VML 转换为 SVG。但是 SVG 不允许在 SVG 标签之间嵌入 html 标签。在 stack 和 google 上搜索后，我发现使用 foreignobject 标签，但是它也只支持到 IE-8。我还尝试使用 switch 标签放置在异物标签上方，但它没有用。有什么方法可以在下面的 SVG 标签之间嵌入 html 代码。提前致谢

<html>
<head>
<meta charset="UTF-8">
<title>HTML inside SVG</title>
<style type="text/css"></style></head>
<body>        
    <svg width="500" height="300" style="border:1px red solid">
        <switch>
        <foreignobject class="node" x="46" y="22" width="100" height="100">

                <div style="border:1px green solid">I'm a div inside a SVG.</div>                
        </foreignobject>
        </switch>
    </svg>
    <div>Interesting! But you a Foreign Object.</div>
</body>

Answer 1

您的问题与以下内容重复：is it possible to append a div inside svg element

You can't append HTML to SVG (technically you can with foreignObject, but it's a rabbit hole). Furthermore, visible elements in SVG can't be nested, so elements such as circle, rect, path and such can't have children elements.

Answer 2

您只能使用 CSS 来实现。请参阅随附的 jsFiddle。我已将您的示例留在 html/css 实施上方以供参考。

https://jsfiddle.net/Lwtb9w5s/

<div class="container">
  <div class="inner">
    <span>I'm a div inside a SVG.</span>
  </div>
</div>

.container {
  height: 300px;
  width: 500px;
  border:1px red solid
}

.inner {
  border:1px green solid;
  position: relative;
  top: 22px;
  left: 46px;
  width: 100px;
}

如何在 SVG 标签之间嵌入 html 代码

How to embed html code between SVG tags

html

css

svg

vml