使用 DOM 的 createElement 创建空元素
Create empty element with DOM's createElement
问题是我想用 JavaScript 动态创建 svg 文件。但是当绘制路径时,它不会呈现到屏幕上(最近 2~3 小时我正在寻找问题)......这就是......当使用 document.createElement
创建元素时,我们得到 <element> </element>
。但是路径元素必须创建为空元素 - <path .../>
。
所以。如何使用 document.createElement
创建空元素?或者也许我不能用 document.createElement
做到这一点而必须使用 JQuery 来做到这一点?
let b1b2 = document.createElement('path');
b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');
<path d="M0 0 L100 100" fill="none" stroke="red" stroke-width="5"></path>
SVG 有特殊的命名空间要求。您需要使用 document.createElementNS:
document.createElementNS('http://www.w3.org/2000/svg', 'path');
示例:
let b1b2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');
document.getElementById('svg').appendChild(b1b2);
<svg id="svg"></svg>
问题是我想用 JavaScript 动态创建 svg 文件。但是当绘制路径时,它不会呈现到屏幕上(最近 2~3 小时我正在寻找问题)......这就是......当使用 document.createElement
创建元素时,我们得到 <element> </element>
。但是路径元素必须创建为空元素 - <path .../>
。
所以。如何使用 document.createElement
创建空元素?或者也许我不能用 document.createElement
做到这一点而必须使用 JQuery 来做到这一点?
let b1b2 = document.createElement('path');
b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');
<path d="M0 0 L100 100" fill="none" stroke="red" stroke-width="5"></path>
SVG 有特殊的命名空间要求。您需要使用 document.createElementNS:
document.createElementNS('http://www.w3.org/2000/svg', 'path');
示例:
let b1b2 = document.createElementNS('http://www.w3.org/2000/svg', 'path');
b1b2.setAttribute('d', 'M0 0 L100 100');
b1b2.setAttribute('fill', 'none');
b1b2.setAttribute('stroke', 'red');
b1b2.setAttribute('stroke-width', '5');
document.getElementById('svg').appendChild(b1b2);
<svg id="svg"></svg>