Javascript foreignObject SVG元素仅显示纯文本_Javascript_Html_Xml_Svg

Javascript foreignObject SVG元素仅显示纯文本

javascript html xml svg

Javascript foreignObject SVG元素仅显示纯文本,javascript,html,xml,svg,Javascript,Html,Xml,Svg,以下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" requiredExt

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

你把文字放进去了，你到底期待什么。另外，笔划宽度不适用于html文本FWIW。谢谢你的评论，我编辑了我的问题。你给我指出了正确的东西

rabbit.util.createElement

正在使用

document.createElements（“http://www.w3.org/2000/svg“，姓名）

这是错误的，因为

不应该有svg名称空间。我通过传递正确的名称空间来纠正它，现在它按预期工作。多谢各位。

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