在Chrome中不显示SVG foreignObject [英] SVG foreignObject not showing in Chrome

问题描述

我有一个包含div的foreignObject的SVG元素。然后在我的js中，我这样做：

$ $ $ $（＃wrapper> svg> foreignObject> div）sparkline（data） ;

在div内创建一个画布。当我看到firebug这两个浏览器的html代码时：

Firefox：

 < SVG> 
< foreignObject width =20height =20x =10y = -  10> 
< div> 
< canvas style =display：inline-block; width：18px; height：19px; vertical-align：top; width =18height =19>< / canvas> 
< / div> 
< / foreignObject> 
< / svg> 
  

Chrome：

 < SVG> 
< foreignobject width =20height =20x =10y = -  10/> 
< svg> 
  

在chrome中它甚至没有显示div。我创建div的方式是

pre $ node $> $ node $ $ $ $ $ $ $ $ $ $ $ $ $ $ $ .btr（width， 20）
.attr（height，20）
.attr（x，10）
.attr（y， - 10） ;
$ b $（＃wrapper> svg> foreignObject）。append（< div>< / div>）;

Firefox正在工作，因为我期望它能够正常工作。但铬不。有没有人有任何建议？另外，我认为部分问题是铬萤火虫HTML输出显示foreignobject，但火狐显示foreignObject我的方式你需要有一个HTML主体作为foreignobject的子元素。 一旦你有了，你可以把任何东西放在身体里。

I have an SVG element with a foreignObject which contains a div. Then in my js I do this:

$("#wrapper>svg>foreignObject>div").sparkline(data);

which creates a canvas within the div. When I look at the firebug html code for the two browser are:

Firefox:

<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>

Chrome:

<svg>
    <foreignobject width="20" height="20" x="10" y="-10"/>
<svg>

In chrome it doesnt even show the div. The way I create the div is

nodeEnter.append("foreignObject")
  .attr("width", "20")
  .attr("height", "20")
  .attr("x", "10")
  .attr("y","-10");

$("#wrapper>svg>foreignObject").append("<div></div>");

Firefox is working as I am expecting it to work. But chrome does not. Does anyone have any suggestions?

Also, I think part of the problem is that the chrome firebug HTML output shows "foreignobject" but the Firefox shows "foreignObject" the way I appended.

解决方案

You need to have an HTML body be the sub-element of foreignobject. Once you have that you can put anything inside the body.

这篇关于在Chrome中不显示SVG foreignObject的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！