Javascript 创建SVG使用

当我在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>

---

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

const SVG\u NS=http://www.w3.org/2000/svg';
常量SVG_XLINK=”http://www.w3.org/1999/xlink";
设cDiv=document.createElement（'div'）；
让cSvg=document.createElements（SVG_NS，'SVG'）；
附肢儿童（cSvg）；
让cUse=document.createElements（SVG_NS，“use”）；
setAttributeNS（SVG_XLINK，“XLINK:href”，“星型”）；
cSvg.appendChild（cUse）；
document.querySelector（“.container”）.appendChild（cDiv）
svg{边框：1px实心；最大宽度：100vh；}

.a{fill:#64C37D；}
请提供更多的代码，包括svg和
c
变量。好的，解决了问题，谢谢。为什么SVG和USE元素需要名称空间，为什么只在javascript中？简短回答：在HTML文档中创建名为“SVG”和“USE”的元素而不设置名称空间，只会创建具有这些名称的HtmlUnknowneElement对象。长答案：请阅读上面的“短答案”是引用自
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)
    }