Javascript SVG foreignObject未在Chrome中显示
我有一个SVG元素，其中包含一个包含div的foreignObject。然后在我的js中执行以下操作：Javascript SVG foreignObject未在Chrome中显示,javascript,html,firefox,google-chrome,jquery-svg,Javascript,Html,Firefox,Google Chrome,Jquery Svg,我有一个SVG元素，其中包含一个包含div的foreignObject。然后在我的js中执行以下操作： $("#wrapper>svg>foreignObject>div").sparkline(data); 这在div中创建了一个画布。当我查看两个浏览器的firebug html代码时，它们是： 火狐： <svg> <foreignObject width="20" height="20" x="10" y="-10"> <
$("#wrapper>svg>foreignObject>div").sparkline(data);
<svg>
<foreignObject width="20" height="20" x="10" y="-10">
<div>
<canvas style="display: inline-block; width: 18px; height: 19px; vertical-align: top;" width="18" height="19"></canvas>
</div>
</foreignObject>
</svg>
<svg>
<foreignobject width="20" height="20" x="10" y="-10"/>
<svg>
nodeEnter.append("foreignObject")
.attr("width", "20")
.attr("height", "20")
.attr("x", "10")
.attr("y","-10");
$("#wrapper>svg>foreignObject").append("<div></div>");
nodeEnter.append（“外来对象”）
.attr（“宽度”、“20”）
.attr（“高度”、“20”）
.attr（“x”、“10”）
.attr（“y”和“-10”）；
$（“#包装器>svg>外来对象”）.append（“”）；
另外，我认为部分问题在于chrome firebug HTML输出显示“foreignobject”，而Firefox显示“foreignobject”的方式与我添加的方式相同。您需要将HTML主体作为foreignobject的子元素。一旦你有了它，你就可以在身体里放任何东西。为了增加对话，这里有一些标记。Chrome和Firefox表现不同，这些样式标记消除了差异（添加到html重置？）。显然，您不需要html主体，而需要标记上的名称空间引用xmlns，无论是
bodydiv<!doctype html><html><body>
<svg xmlns="http://www.w3.org/2000/svg" width="500px" height="300px">
<foreignObject width="100" height="57">
<div xmlns="http://www.w3.org/1999/xhtml" style="position:relative;
width:100px;height:57px;overflow:hidden;font-family:Arial;
font-weight:400;font-size:12px;line-height:100%;">
Lorem ipsum dolor sit amet, consectetur adipiscing egplit, sed do eiusmod
tempor incididunt ut labore
</div>
</foreignObject>
</svg>
</body></html>
这是一个很好的例子
临时劳工保险
foreignObjectrequiredExtensions