相关疑难解决方法(0)

有没有办法将foreignObject包含一些简单 HTML的元素附加到 svg 元素？这是我试过的代码：

 var foreignObject = document.createElement('foreignObject');
 foreignObject.setAttribute('height', '300');
 foreignObject.setAttribute('width', '300');
 var div = document.createElement('div');
 div.innerHTML = 'Hello World';
 foreignObject.appendChild(div); 
 svg.appendChild(foreignObject); //svg is an already created svg element containing a d3 chart

但是即使在此代码执行之后 svg 也保持不变。还有什么我需要做的吗？

这是我的测试用例。

http://tobeythorn.com/isi/dummy2.svg

http://tobeythorn.com/isi/isitest.html

• 如果我只打开 svg 本身，内部的 img 就会渲染得很好。

• 但是当我将此 svg 设为 img 的 src 时，内部 img 不会渲染。我没有收到任何错误。

• 如果我将内部 img 设置为 data-url，它就会被渲染。如果可能的话，我想避免 data-urls，因为它们使事情变得复杂，有大小限制，并且无法缓存。

• 同样的事情也发生在 FF、Chrome、Opera 和 Safari 中。

我找不到解决方案，但可能相关：foreignObject inside secondary SVG element for Chrome

跨域问题？

规格的限制？

浏览器错误？