javascript - 创建 SVG 使用

Question

当我在 HTML 中添加此 SVG 时，它会显示。当我尝试使用 JS 构建它时，它不显示。它们的代码看起来完全相同，显然我忽略了一些东西。

在 HTML 中工作

<div><svg><use href="#star"></use></svg></div>

<svg xmlns="http://www.w3.org/2000/svg" >
    <symbol id='star' viewBox='0 0 460 460'>
        <style>.a{fill:#64C37D;}</style><polygon points="243.3 280.1 199.6 257.1 199.6 289.1 199.6 289.1 199.8 289.2 280.8 331.8 280.7 331.7 280.8 331.8 265.4 241.1 235 231.5 " fill="#99EFF2"/><polygon points="240.3 164 331 177.3 265.4 241.1 299.7 252.3 299.7 252.3 299.7 252.3 399.6 154.9 261.5 134.9 240.3 164 " fill="#933EC5"/><polygon points="299.7 252.3 265.4 241.1 280.8 331.8 280.7 331.7 280.8 331.8 199.8 289.2 199.8 324.9 199.8 324.9 323.2 389.8 323.2 389.7 323.2 389.8 " fill="#00D7DF"/><polygon points="199.8 289.2 199.6 289.1 118.3 331.8 133.8 241.3 133.7 241.2 99.9 252.2 99.9 252.3 99.9 252.3 76.3 389.8 199.8 324.9 199.8 324.9 " class="a"/><polygon points="99.9 252.2 133.7 241.2 68.1 177.3 68.2 177.2 68.2 177.2 159.3 164 159.3 164 138.1 134.8 138.1 134.8 0.1 154.9 0.1 154.9 0 154.9 99.9 252.3 99.9 252.3 " fill="#FF9811"/><polygon points="159.3 164 199.6 81.8 240.3 164 261.5 134.9 199.8 9.8 138.1 134.8 138.1 134.8 " fill="#EA348B"/><polygon points="133.9 241.2 164.1 231.5 164.1 231.4 " class="a"/><polygon points="331 177.3 240.3 164 221.6 189.8 270.4 196.8 235 231.5 265.4 241.1 " fill="#7C84E8"/><polygon points="199.6 257.1 199.5 257.1 155.8 280.1 164.1 231.5 133.9 241.2 133.9 241.3 133.8 241.3 118.3 331.8 199.6 289.1 199.6 289.1 " fill="#91DC5A"/><polygon points="133.9 241.2 164.1 231.4 128.7 196.8 177.7 189.6 159.3 164 159.3 164 68.2 177.2 68.2 177.2 68.1 177.3 133.7 241.2 133.8 241.3 133.9 241.3 " fill="#FFDA44"/><polygon points="177.7 189.6 199.6 145.4 221.6 189.8 240.3 164 240.3 164 199.6 81.8 159.3 164 159.3 164 159.3 164 " fill="#F7AED1"/>
    </symbol>
</svg>

在 JS 中不起作用

c = {
'Make Bed': true, 
'Clean Room': true, 
'Study': false}

for (const i in c) {
        let cDiv = document.createElement('div')
        let cSvg = document.createElement('svg')
        cDiv.appendChild(cSvg)
        let cUse = document.createElement('use');
        if (c[i]) {
            cUse.setAttribute('href', '#star');  
        }
        cSvg.appendChild(cUse)
        document.querySelector('.container').appendChild(cDiv)
    }

Answer 1

为了创建 SVG 元素，您必须使用 createElementNS .要设置属性，您需要使用 setAttributeNS其中 NS 代表命名空间。您还需要使用命名空间 URI

const SVG_NS = 'http://www.w3.org/2000/svg';
const SVG_XLINK = "http://www.w3.org/1999/xlink";



let cDiv = document.createElement('div');

let cSvg = document.createElementNS(SVG_NS, 'svg');
cDiv.appendChild(cSvg);
let cUse = document.createElementNS(SVG_NS, "use");
cUse.setAttributeNS(SVG_XLINK, "xlink:href", "#star");
cSvg.appendChild(cUse);
document.querySelector(".container").appendChild(cDiv);

svg{border:1px solid; max-width:100vh;}

<div class="container">
<div><svg><use href="#star"></use></svg></div>

<svg xmlns="http://www.w3.org/2000/svg" >
    <symbol id='star' viewBox='0 0 460 460'>
        <style>.a{fill:#64C37D;}</style><polygon points="243.3 280.1 199.6 257.1 199.6 289.1 199.6 289.1 199.8 289.2 280.8 331.8 280.7 331.7 280.8 331.8 265.4 241.1 235 231.5 " fill="#99EFF2"/><polygon points="240.3 164 331 177.3 265.4 241.1 299.7 252.3 299.7 252.3 299.7 252.3 399.6 154.9 261.5 134.9 240.3 164 " fill="#933EC5"/><polygon points="299.7 252.3 265.4 241.1 280.8 331.8 280.7 331.7 280.8 331.8 199.8 289.2 199.8 324.9 199.8 324.9 323.2 389.8 323.2 389.7 323.2 389.8 " fill="#00D7DF"/><polygon points="199.8 289.2 199.6 289.1 118.3 331.8 133.8 241.3 133.7 241.2 99.9 252.2 99.9 252.3 99.9 252.3 76.3 389.8 199.8 324.9 199.8 324.9 " class="a"/><polygon points="99.9 252.2 133.7 241.2 68.1 177.3 68.2 177.2 68.2 177.2 159.3 164 159.3 164 138.1 134.8 138.1 134.8 0.1 154.9 0.1 154.9 0 154.9 99.9 252.3 99.9 252.3 " fill="#FF9811"/><polygon points="159.3 164 199.6 81.8 240.3 164 261.5 134.9 199.8 9.8 138.1 134.8 138.1 134.8 " fill="#EA348B"/><polygon points="133.9 241.2 164.1 231.5 164.1 231.4 " class="a"/><polygon points="331 177.3 240.3 164 221.6 189.8 270.4 196.8 235 231.5 265.4 241.1 " fill="#7C84E8"/><polygon points="199.6 257.1 199.5 257.1 155.8 280.1 164.1 231.5 133.9 241.2 133.9 241.3 133.8 241.3 118.3 331.8 199.6 289.1 199.6 289.1 " fill="#91DC5A"/><polygon points="133.9 241.2 164.1 231.4 128.7 196.8 177.7 189.6 159.3 164 159.3 164 68.2 177.2 68.2 177.2 68.1 177.3 133.7 241.2 133.8 241.3 133.9 241.3 " fill="#FFDA44"/><polygon points="177.7 189.6 199.6 145.4 221.6 189.8 240.3 164 240.3 164 199.6 81.8 159.3 164 159.3 164 159.3 164 " fill="#F7AED1"/>
    </symbol>
</svg>

</div>