Question

我想通过使用JS创建的SVG中的路径绘制一个正方形。但是浏览器不接受这个：

使用Javascript：

var svg = document.createElement('svg');
svg.width = "200";
svg.height = "200";
document.body.appendChild(svg);

var path = document.createElement('path');
path.setAttribute('d','M100,0 L200,100 100,200 0,100Z');
path.setAttribute('fill','red');
svg.appendChild(path);

HTML（输出）：

<svg width="200" height="200">
  <path d="M100,0 L200,100 100,200 0,100Z" fill="red"/>
</svg>

Answer 1

createElement只能用于创建html元素。要创建SVG元素，必须使用createElementNS并提供SVG名称空间作为第一个参数。

还有document.body.appendChild（'svg'）;想要添加svg元素而不是包含文本'svg'的字符串

，可能是一个拼写错误

var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
svg.setAttribute('width','200');
svg.setAttribute('height','200');
document.body.appendChild(svg);

var path = document.createElementNS('http://www.w3.org/2000/svg', 'path');
path.setAttribute('d','M100,0 L200,100 100,200 0,100Z');
path.setAttribute('fill','red');
svg.appendChild(path);

Answer 2

使用createElementNS代替createElement。

动态添加完整的svg形状（使用纯Javascript）

2 个答案: