使用 Javascript 创建时内联 SVG 不渲染
Jai*_*har 5 html javascript svg
我正在尝试以编程方式创建一排盾牌的内联 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 已正确渲染，但我的自动生成的 svg 未渲染。
输出：
预期输出：
如何以编程方式创建一排盾牌的内联 svg 图像？
提前致谢！
我看过：
- JavaScript 内联 SVG 未渲染[重复]：给出的答案是使用
createElementNS，我已经在使用了。 - Inline-SVG not render when generated by JS : 答案谈论外部 svg。
- Inline SVG in CSS：答案讨论了嵌入 SVG 的数据 uri。不是我在做什么。
- img src SVG 用 CSS 改变样式：答案谈论外部 svgs。
我可以看到您正在尝试创建多个 SVG，但我认为只使用 SVG 然后在其中插入所有路径是有意义的。
我创建了一个具有不同盾牌的数组（它们可以有更多属性，这里只有颜色）。并为他们每个人创建一条路径。仓位由指数控制。
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>