js生成svg-CSDN博客

本文链接：https://blog.csdn.net/yangguangxiadewo/article/details/134581032

本文讲述了如何在JavaScript中正确使用createElementNS创建SVG元素，强调了SVG不是普通HTML元素，不能直接使用字符串形式，应通过setAttribute设置属性，如width、height和viewBox等。

摘要由CSDN通过智能技术生成

因为svg不是普通html元素，所以以下用字符串直接生成svg的写法是错误的

let svg = `<svg:svg class="svgPath-svg" width="128" height="128" viewBox="0 0 128 128"><path d="M 83.96875 17.5625 L 83.96875 17.59375 L 76.65625 24.875 L 97.09375 24.96875 L 76.09375 45.96875 L 81.9375 51.8125 L 102.78125 30.9375 L 102.875 51.15625 L 110.15625 43.875 L 110.1875 17.59375 L 83.96875 17.5625 z M 44.125 17.59375 L 17.90625 17.625 L 17.9375 43.90625 L 25.21875 51.1875 L 25.3125 30.96875 L 46.15625 51.8125 L 52 45.96875 L 31 25 L 51.4375 24.90625 L 44.125 17.59375 z M 46.0625 76.03125 L 25.1875 96.875 L 25.09375 76.65625 L 17.8125 83.9375 L 17.8125 110.21875 L 44 110.25 L 51.3125 102.9375 L 30.90625 102.84375 L 51.875 81.875 L 46.0625 76.03125 z M 82 76.15625 L 76.15625 82 L 97.15625 103 L 76.71875 103.0625 L 84.03125 110.375 L 110.25 110.34375 L 110.21875 84.0625 L 102.9375 76.8125 L 102.84375 97 L 82 76.15625 z"></path></svg:svg>`;
odiv.innerHTML = svg;

如果这么写不会报错，但是path的大小为0

正确的写法应该是

 const SVG_NS = "http://www.w3.org/2000/svg"  // 1、创建svg容器
 let svg = document.createElementNS(SVG_NS, 'svg');
 svg.setAttribute('class', 'svgPath-svg');
 svg.setAttribute('height', 128);
 svg.setAttribute('width', 128);
 svg.setAttribute('viewBox',"0 0 128 128");
 let path = document.createElementNS("http://www.w3.org/2000/svg","path");
 path.setAttribute('d', 'M 83.96875 17.5625 L 83.96875 17.59375 L 76.65625 24.875 L 97.09375 24.96875 L 76.09375 45.96875 L 81.9375 51.8125 L 102.78125 30.9375 L 102.875 51.15625 L 110.15625 43.875 L 110.1875 17.59375 L 83.96875 17.5625 z M 44.125 17.59375 L 17.90625 17.625 L 17.9375 43.90625 L 25.21875 51.1875 L 25.3125 30.96875 L 46.15625 51.8125 L 52 45.96875 L 31 25 L 51.4375 24.90625 L 44.125 17.59375 z M 46.0625 76.03125 L 25.1875 96.875 L 25.09375 76.65625 L 17.8125 83.9375 L 17.8125 110.21875 L 44 110.25 L 51.3125 102.9375 L 30.90625 102.84375 L 51.875 81.875 L 46.0625 76.03125 z M 82 76.15625 L 76.15625 82 L 97.15625 103 L 76.71875 103.0625 L 84.03125 110.375 L 110.25 110.34375 L 110.21875 84.0625 L 102.9375 76.8125 L 102.84375 97 L 82 76.15625 z');
 svg.appendChild(path);
 odiv.appendChild(svg);

svg元素及其内部元素只能通过setAttribute去设置值，如果使用svg.className = "svgPath-svg"是会报错的