我尝试使用javascript创建动态svg
我的结果是
<svg xmlns='http://www.w3.org/2000/svg' viewBox='5279 1710 12.125 12.125'>
<g transform='translate(4311 1165)'>
<path fill='#fffff' d='M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6' transform='translate(632.48 470.439)'/>
</g>
</svg>
Js代码获取上面的图像:
const svg1 = document.createElementNS('http://www.w3.org/2000/svg', 'svg')
svg1.setAttribute('viewBox', '5279 1710 12.125 12.125')
svg1.setAttribute('transform', 'translate(4311 1165)')
svg1.setAttribute('fill', 'fffff')
svg1.setAttribute('d', "M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6'")
你错了的是你将'd'属性添加到svg并且没有创建路径和g,试试这个
(function () {
var element = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
element.setAttribute('viewBox', '5279 1710 12.125 12.125');
var g = document.createElementNS('http://www.w3.org/2000/svg', 'g');
g.setAttribute('transform', 'translate(4311 1165)');
var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('fill', '#000000');
path.setAttribute('d', 'M346.045,76.5a5.632,5.632,0,0,0,0,8.245,6.143,6.143,0,0,0,1.6-4.122A6');
path.setAttribute('transform', 'translate(632.48 470.439)');
g.appendChild(path);
element.appendChild(g);
document.querySelector('body').appendChild(element);
})();