我尝试使用 JavaScript 在 html 中动态创建 svg 路径元素。
我想在<defs>稍后可以在<use>xlink:href 元素中重用的元素中设置路径。
创建后（在,javascript,html,svg"/>

时间戳

首页 > 解决方案 > 脚本化使用

我尝试使用 JavaScript 在 html 中动态创建 svg 路径元素。
我想在<defs>稍后可以在<use>xlink:href 元素中重用的元素中设置路径。
创建后（在

javascript - 脚本化使用

我尝试使用 JavaScript 在 html 中动态创建 svg 路径元素。
我想在<defs>稍后可以在<use>xlink:href 元素中重用的元素中设置路径。
创建后（在

问题描述

我尝试使用 JavaScript 在 html 中动态创建 svg 路径元素。
我想在<defs>稍后可以在<use>xlink:href 元素中重用的元素中设置路径。
创建后（在示例中按下按钮）屏幕的下部保持空白。
相同的 html，当静态放置时可以正常工作。（在按钮上方）
在 Chrome/Firefox 中检查显示，在动态操作的 dom 中，#shadow-root（节点？）在动态创建的部分中是空的，而它在静态部分中保存了路径的副本。

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

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

我认为您在这两个组件中都没有正确使用过滤器。您将过滤器测试与组成数组的操作混淆了。过滤器所需要的只是一个返回布尔值并为您构造数组的测试。

尝试改变：

let itemArray = [];
itemlist.cartItems.filter(target => {
      return id === target.id ? itemArray.push(target) : null;
    });

至

const itemArray = itemlist.cartItems.filter(target => id === target.id);

同样在购物车组件中。

有关详细信息，filter请参阅https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/filter

标签： javascripthtmlsvg

解决方案

感谢罗伯特·朗森。这指向了正确的方向。我读了一篇文章，实际上 xlink:href 属性属于不同的命名空间。所以我不得不使用' http://www.w3.org/1999/xlink '而不是' http://www.w3.org/2000/svg '。因此，按照一般建议始终在我的 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);

}

推荐阅读