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

px9o7tmv 于 2023-01-16 发布在 Java

关注(0)|答案(2)|浏览(137)

我正尝试通过编程创建一排盾牌的内嵌svg图像。
我的盾牌是一条简单的道路：

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

下面是我的脚本：
x一个一个一个一个x一个一个二个x
可复制代码：

<!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 inline SVG not rendering [duplicate]：给出的答案是使用createElementNS，我已经在使用它了。
Inline-SVG not rendering when generated by JS：答案涉及外部svg。
Inline SVG in CSS：Answers讨论了嵌入SVG的数据URI。不是我正在做的。
img src SVG changing the styles with CSS：回答关于外部SVG的问题。

JavaScript

来源：https://stackoverflow.com/questions/75124174/inline-svg-not-rendering-when-created-with-javascript

2条答案

按热度按时间

t3irkdon1#

我可以看到您正在尝试创建多个SVG，但我认为只使用SVG然后在其中插入所有路径是有意义的。
我创建了一个包含不同 shell 的数组（它们可以有更多的属性，这里只有颜色），并为每个 shell 创建一个路径，位置由索引控制。

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>

赞(0）回复(0）举报 2023-01-16

agxfikkp2#

在DOM中创建为HTML标记的SVG将获得正确的名称空间，无需指定
要防止出现更多名称间距问题，可以将SVG内容添加为innerHTML
我使用svg-path-editor将您的Shield转换为relative表示法，

所以不需要translate来定位它

Package 在一个本地JSWebComponent <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>

赞(0）回复(0）举报 2023-01-16

我来回答

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

2条答案

相关问题

热门标签

最新问答