脚本化使用<；svg>&书信电报；defs>&书信电报；使用xlink:href。。。via javascript失败_Javascript_Html_Svg

脚本化使用<；svg>&书信电报；defs>&书信电报；使用xlink:href。。。via javascript失败

javascript html svg

脚本化使用<；svg>&书信电报；defs>&书信电报；使用xlink:href。。。via javascript失败,javascript,html,svg,Javascript,Html,Svg,我尝试使用JavaScript在html中动态创建svg路径元素。我想在元素中设置路径，以后可以在xlink:href元素中重用这些路径。创建后（按下示例中的按钮），屏幕的下部保持空白。同样的html，当静态放置时工作良好。（按钮上方）在Chrome/Firefox中检查发现，在动态操作的dom中，动态创建的部分中的#shadow root（node？）为空，而静态部分中的路径副本为空有没有办法触发我错过的手动刷新？这通常是禁止的吗？我的代码有错误吗 <!DOCTYPE ht

我尝试使用JavaScript在html中动态创建svg路径元素。
我想在

元素中设置路径，以后可以在

xlink:href元素中重用这些路径。
创建后（按下示例中的按钮），屏幕的下部保持空白。
同样的html，当静态放置时工作良好。（按钮上方）
在Chrome/Firefox中检查发现，在动态操作的dom中，动态创建的部分中的#shadow root（node？）为空，而静态部分中的路径副本为空

有没有办法触发我错过的手动刷新？
这通常是禁止的吗？
我的代码有错误吗

<!DOCTYPE html>
<html>
    <script>
        function test() {
            component = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
            component.classList.add("component");
            component.style.left = '0px';
            component.style.top = '0px';
            component.style.width = '800px';
            component.style.height = '400px';
            component.style.position = "absolute";
            document.getElementById("theConnections").appendChild(component);           

            defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
            component.appendChild(defs);

            pathdef = document.createElementNS('http://www.w3.org/2000/svg', 'path');
            pathdef.id = "conn1";
            pathdef.setAttribute("d", "M264 133 L396 132");
            defs.appendChild(pathdef);

            path2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
            path2.setAttribute("xlink:href", "#conn1");
            path2.setAttribute("stroke", "black");
            path2.setAttribute("stroke-width", "9");
            component.appendChild(path2);

            path = document.createElementNS('http://www.w3.org/2000/svg', 'use');
            path.setAttribute("xlink:href", "#conn1");
            path.setAttribute("stroke", "white");
            path.setAttribute("stroke-width", "7");
            component.appendChild(path);

        }
    </script>
    <style>
        .dooferKasten {
            background-color: rgb(82, 69, 50);
        }
    </style>
    <body>
        <div style="width:800px; height:400px; position: relative" class="dooferKasten">
            <svg class="component" style="left: 0px; top: 0px; width: 800px; height: 400px; position: absolute;">
                <defs><path id="conn0" d="M264 133 L396 132"></path></defs>
                <use xlink:href="#conn0" stroke="black" stroke-width="9"></use>
                <use xlink:href="#conn0" stroke="white" stroke-width="7"></use>
            </svg>
        </div>
        <button onclick="test()">test</button>
        <div style="width:800px; height:400px; position: relative" id="theConnections" class="dooferKasten">
        </div>      
    </body>
</html>


功能测试（）{
组件=document.createElements（'http://www.w3.org/2000/svg'、'svg'）；
component.classList.add（“组件”）；
component.style.left='0px'；
component.style.top='0px'；
component.style.width='800px'；
component.style.height='400px'；
component.style.position=“绝对”；
document.getElementById（“连接”）.appendChild（组件）；
defs=document.createElements（'http://www.w3.org/2000/svg","defs",；
子组件（defs）；
pathdef=document.createElements（'http://www.w3.org/2000/svg","路径",；
pathdef.id=“conn1”；
设置属性（“d”、“M264 133 L396 132”）；
defs.appendChild（pathdef）；
路径2=document.createElements（'http://www.w3.org/2000/svg","使用",；
路径2.setAttribute（“xlink:href”，“#conn1”）；
路径2.setAttribute（“笔划”、“黑色”）；
路径2.setAttribute（“笔划宽度”、“9”）；
appendChild（路径2）；
path=document.createElements（'http://www.w3.org/2000/svg","使用",；
setAttribute（“xlink:href”，“#conn1”）；
setAttribute（“笔划”、“白色”）；
setAttribute（“笔划宽度”、“7”）；
appendChild（路径）；
}
杜弗卡斯滕先生{
背景色：rgb（82,69,50）；
}
测试

感谢罗伯特·朗森。这指向了正确的方向。我读过一篇文章，实际上xlink:href属性属于不同的名称空间。因此，我不得不使用“”而不是“”。因此，按照一般建议，在svg名称空间中始终使用setAttributeNS

对无前缀的属性使用null

使用正确的名称空间（该属性属于完全不同的名称空间），我的代码如下所示：

function test() {
    component = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
    component.classList.add("component");
    component.style.left = '0px';
    component.style.top = '0px';
    component.style.width = '800px';
    component.style.height = '400px';
    component.style.position = "absolute";
    document.getElementById("theConnections").appendChild(component);           

    defs = document.createElementNS('http://www.w3.org/2000/svg', 'defs');
    component.appendChild(defs);

    pathdef = document.createElementNS('http://www.w3.org/2000/svg', 'path');
    pathdef.id = "conn1";
    pathdef.setAttributeNS(null, "d", "M264 133 L396 132");
    defs.appendChild(pathdef);

    path2 = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    path2.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#conn1");
    path2.setAttributeNS(null, "stroke", "black");
    path2.setAttributeNS(null, "stroke-width", "9");
    component.appendChild(path2);

    path = document.createElementNS('http://www.w3.org/2000/svg', 'use');
    path.setAttributeNS('http://www.w3.org/1999/xlink', "xlink:href", "#conn1");
    path.setAttributeNS(null, "stroke", "white");
    path.setAttributeNS(null, "stroke-width", "7");
    component.appendChild(path);

}

不能使用setAttribute将xlink:href设置为xlink命名空间中的值。当您使用createElements创建元素时，您使用名称空间做的事情是正确的。您需要使用SetAttributes创建xlink:href属性我将test（）中的代码更改为：

pathdef.setAttributeNS（'http://www.w3.org/2000/svg","d","M264 133 L396 132";；路径2.setAttributeNS（'http://www.w3.org/2000/svg“，“xlink:href”，“#conn1”）；路径2.setAttributeNS（'http://www.w3.org/2000/svg","笔划","黑色",；路径2.setAttributeNS（'http://www.w3.org/2000/svg","笔划宽度","9",；path.setAttributeNS（'http://www.w3.org/2000/svg“，“xlink:href”，“#conn1”）；path.setAttributeNS（'http://www.w3.org/2000/svg","笔划","白色",；path.setAttributeNS（'http://www.w3.org/2000/svg","笔划宽度","7",；

但这也不行。如果你想减少JS，可以在CSS中移动

笔划

和

笔划宽度