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>
在 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)
}
解决方案
为了创建 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>
推荐阅读
- assembly - 在汇编语言编程中用星号替换元音
- wpf - WPF中系统托盘图标的暗/亮模式
- mongodb - 如何组合/合并 2 个 pymongo 查询的输出?
- queue - 如何通过核心 API 更改 ActiveMQ Artemis 队列的路由类型
- python - Python 中的 Playsound 模块不会播放第二个可选参数值为 False 的声音
- css - ReactJS 中的 Dropdown Broken 布局问题
- django - 查询集中的多个模型和/或一个视图的多个序列化程序?
- angularjs - 我无法使用 primeNg calander 模块以角度打开 calander,我的代码如下,无法在 showOverlay 方法中工作
- arrays - 如何在 Flutter Firestore 中读取数组的 FieldValues
- npm - 使用 npm 安装 web3 时如何修复漏洞?