Question

以下foreignobject代码不显示html元素，只显示纯文本：

<g xmlns="http://www.w3.org/2000/svg" x="0" y="0" width="60" height="20" xmlns:pidoco="http://www.pidoco.com/util">
    <foreignObject width="100" height="100" xmlns="http://www.w3.org/2000/svg" requiredExtensions="http://www.w3.org/1999/xhtml">
        <body xmlns="http://www.w3.org/1999/xhtml">
            <p style="color: red" xmlns="http://www.w3.org/1999/xhtml">text</p>
        </body>
    </foreignObject>
</g>

没有获得彩色文字，我什么都没得到（白色区域）。即使我删除了body和p标签，只添加了一个文本节点，外来元素仍然保持白色。

当我删除body，p标签和属性requiredExtensions时，我得到纯文本。

g标签正常工作，因为可以渲染其他svg元素。

如何才能正确显示所有html？

我正在使用Chrome 37。

编辑：

我使用以下JavaScript代码创建外来对象

    var foreignObject = rabbit.util.createElement("foreignObject", {
        width: 100,
        height: 100,
        xmlns: "http://www.w3.org/2000/svg",
        requiredExtensions: "http://www.w3.org/1999/xhtml"
    });

    var body = rabbit.util.createElement("body", {
        xmlns: "http://www.w3.org/1999/xhtml"
    });

    var p = rabbit.util.createElement("p", {
        style: "color: red",
        xmlns: "http://www.w3.org/1999/xhtml"
    });
    var textContent = document.createTextNode("text");

    p.appendChild(textContent);
    body.appendChild(p);
    foreignObject.appendChild(body);
    group.appendChild(foreignObject);

foreignObject SVG元素仅显示纯文本

0 个答案: