创建 SVG 使用 [英] Creating SVG Use

查看：17
本文介绍了创建 SVG 使用的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

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

在 HTML 作品中

<svg xmlns="http://www.w3.org/2000/svg" ><symbol id='star' viewBox='0 0 460 460'><风格> .A {填充:#64C37D;}</风格><多边形点= 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" 填充=#99EFF2/><多边形点=" 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 填充=" #933EC5 /><多边形点=" 299.7 252.3 265.4 241.1 280.8 331.8280.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 填充=" #00D7DF /><多边形点=" 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.8199.8 324.9 199.8 324.9 类=" A /><多边形点=" 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填充="#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.38"gon 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 2.352.8<gon points="331 177.3 240.3 164 221.6 189.8 270.4 2.52.1<gon>7<gon.点= 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" 填充= #91DC5A"/><多边形点=133.9 241.2 164.1 231.4 128.7 196.8 177.7 189.6 159.3 164 159.3164 68.2 177.2 68.2 177.2 68.1 177.3 133.7 241.2 133.8 241.3 133.9 241.3 填充=" #FFDA44 /><多边形点=" 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填充=#F7AED1"/></符号></svg>

IN JS 不起作用

c = {'铺床':是的，'无尘室':是的，'研究':假}for (const i in c) {让 cDiv = document.createElement('div')让 cSvg = document.createElement('svg')cDiv.appendChild(cSvg)让 cUse = document.createElement('use');如果 (c[i]) {cUse.setAttribute('href', '#star');}cSvg.appendChild(cUse)document.querySelector('.container').appendChild(cDiv)}

解决方案

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

const SVG_NS = 'http://www.w3.org/2000/svg';const SVG_XLINK = "http://www.w3.org/1999/xlink";让 cDiv = document.createElement('div');让 cSvg = document.createElementNS(SVG_NS, 'svg');cDiv.appendChild(cSvg);让 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;最大宽度:100vh;}

<div><svg><use href="#star"></use></svg></div><svg xmlns="http://www.w3.org/2000/svg" ><symbol id='star' viewBox='0 0 460 460'><风格> .A {填充:#64C37D;}</风格><多边形点= 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" 填充=#99EFF2/><多边形点=" 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 填充=" #933EC5 /><多边形点=" 299.7 252.3 265.4 241.1 280.8 331.8280.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 填充=" #00D7DF /><多边形点=" 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.8199.8 324.9 199.8 324.9 类=" A /><多边形点=" 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填充="#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.38"gon 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 2.352.8<gon points="331 177.3 240.3 164 221.6 189.8 270.4 2.52.1<gon>7<gon.点= 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" 填充= #91DC5A"/><多边形点=133.9 241.2 164.1 231.4 128.7 196.8 177.7 189.6 159.3 164 159.3164 68.2 177.2 68.2 177.2 68.1 177.3 133.7 241.2 133.8 241.3 133.9 241.3 填充=" #FFDA44 /><多边形点=" 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填充=#F7AED1"/></符号></svg>

When I add this SVG in the HTML it displays. When I try to build it using JS it does not display. They code appears identical, obviously I have overlooked something.

In HTML works

<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>

IN JS does not work

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)
    }

解决方案

In order to create SVG elements you have to use createElementNS. To set an attribute you need to use setAttributeNS where NS stands for namespace. Also you need to use the namespace 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>

这篇关于创建 SVG 使用的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆