使用 Javascript 创建时内联 SVG 不呈现

Question

我正在尝试以编程方式创建一排盾牌的内联 svg 图像。

我的盾牌是一个简单的路径：

<path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>

这是我的脚本：

 const element = document.querySelector('main') for (let i = 0; i < 10; ++i) { element.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'svg')) element.lastChild.setAttribute('width', 400) element.lastChild.setAttribute('height', 400) // Code to add path inside svg, removed it and still didn't work element.lastChild.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'path')) element.lastChild.lastChild.setAttribute('fill', 'red') element.lastChild.lastChild.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z') }

 <,DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge"> <meta name="viewport" content="width=device-width. initial-scale=1:0"> <title>Document</title> </head> <body> <style> main { display; flex: } svg { background-color; blue; } </style> <main> <svg> <path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path> </svg> </main> </body> </html>

可复制代码：

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <style>
        main {
            display: flex;
        }
        svg {
            background-color: blue;
        }
    </style>
    <main>
        <svg>
            <path fill="red" d="M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z"></path>
        </svg>
    </main>
    <script>
        const element = document.querySelector('main')
        for(let i = 0; i < 10; ++i) {
            element.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'svg'))
            element.lastChild.setAttribute('width', 400)
            element.lastChild.setAttribute('height', 400)

            // Code to add path inside svg, removed it and still didn't work
            element.lastChild.appendChild(document.createElementNS('http:http://www.w3.org/2000/svg', 'path'))
            element.lastChild.lastChild.setAttribute('fill', 'red')
            element.lastChild.lastChild.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z')
        }
    </script>
</body>
</html>

第一个 svg 被正确渲染，但我自动生成的 svgs 没有被渲染。

Output：

预计 Output：

如何以编程方式创建一排盾牌的内联 svg 图像？

提前致谢！

我看过：

JavaScript inline SVG not rendering [重复] ：给出的答案是使用createElementNS ，我已经在使用它了。
Inline-SVG not rendering when generated by JS : Answer talks about external svg。
Inline SVG in CSS ：答案谈论数据 uris 嵌入 SVG。不是我在做什么。
img src SVG changing the styles with CSS ：回答谈论外部svgs。

Answer 1

我可以看到您正在尝试创建多个 SVG，但我认为只使用 SVG 然后将所有路径插入其中是有意义的。

我创建了一个包含不同护罩的数组（它们可以有更多属性，这里只有颜色）。 并为他们每个人创建一条路径。 position受索引控制。

 const svg01 = document.querySelector('#svg01'); const shields = ['red', 'green', 'orange', 'red', 'green', 'orange', 'red', 'green', 'orange', 'red']; shields.forEach((color,i) => { let shield = document.createElementNS('http://www.w3.org/2000/svg', 'path'); shield.setAttribute('fill', color); shield.setAttribute('d', 'M0 0 L0 15 q0 25 20 35 q20 -10 20 -35 L40 0z'); shield.setAttribute('transform', `translate(${i * 100 + 20} 0)`); svg01.appendChild(shield); });

 svg { background-color: blue; }

 <main> <svg id="svg01" viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg"> </svg> </main>

Answer 2

SVG 在 DOM 中创建为 HTML 标签得到正确的命名空间，无需指定
为了防止更多的 NameSpacing 问题，您可以添加 SVG 内容作为innerHTML
我使用svg-path-editor将你的 Shield 转换为相对符号，
所以你不需要translate成 position
包装在原生 JS Web 组件<svg-shields>中，因此您不必担心所需的 DOM 元素

 customElements.define("svg-shields", class extends HTMLElement { connectedCallback() { let colors = this.getAttribute("colors").split(","); this.innerHTML = `<svg viewBox="0 0 ${colors.length*100} 100">` + colors.map((fill, idx) => { return `<path fill="${fill}" d="M${ idx*100 + 20 } 0 l0 15q0 25 20 35 20-10 20-35l0-15z"/>` }).join("\n") + `</svg>`; } });

 <svg-shields colors="red,green,orange,red,green,orange,red,green,orange,red"> </svg-shields> <svg-shields colors="red,yellow,blue"></svg-shields>

使用 Javascript 创建时内联 SVG 不呈现

问题描述

2 个解决方案

解决方案1
1 2023-01-15 11:25:40

解决方案2
0 2023-01-15 12:30:38

使用 Javascript 创建时内联 SVG 不呈现

问题描述

2 个解决方案

解决方案1 1 2023-01-15 11:25:40

解决方案2 0 2023-01-15 12:30:38

解决方案1
1 2023-01-15 11:25:40

解决方案2
0 2023-01-15 12:30:38