Question

我之前已经用这段确切的代码画了一条线，但是当将其重新实现到另一个项目中时，某些功能将无法正常工作。

let main = document.getElementById('main');
let svg = document.createElement('svg');
let newLine = document.createElement('line');
svg.setAttribute('style', `position: fixed;display: block;`);

newLine.setAttribute('x1', 0);
newLine.setAttribute('y1', 0);
newLine.setAttribute('x2', 500);
newLine.setAttribute('y2', 500);
newLine.setAttribute('style', `stroke:red;stroke-width:100;`);
svg.appendChild(newLine);
main.appendChild(svg);

在我运行快递服务器和JSDOM来用svg填充文档中的div之前，然后在路由到“ /”时发送文档元素的innerhtml作为主体，这不是最高效的方法，但是只是玩弄我们在课堂上学习的工具。当我将下面的代码放入html时，应该显示一条黑线，所以我觉得我缺少了一些小片段...

<svg width="500" height="500"> 
 <line x1="50" y1="50" x2="350" y2="350" stroke="black" />
</svg>

Answer 1

在创建createElementNS和svg元素时，您需要使用line，否则它只是认为它们是标记而不是实际的SVG。

此外，由于您没有在setAttribute中使用变量，因此应避免字符串插值，而应使用单引号而不是反引号。

解决方案

let main = document.getElementById('main');
let svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg');
let newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
svg.setAttribute('style', 'position: fixed;display: block;');

newLine.setAttribute('x1', 0);
newLine.setAttribute('y1', 80);
newLine.setAttribute('x2', 100);
newLine.setAttribute('y2', 20);
newLine.setAttribute('style', 'stroke:red;stroke-width:100;');
svg.appendChild(newLine);
main.appendChild(svg);

<div id="main"></div>

文档

https://developer.mozilla.org/en-US/docs/Web/API/Document/createElementNS

Answer 2

弄清楚了，在声明我的svg时需要使用下面的代码

const svgTop = document.createElementNS('http://www.w3.org/2000/svg', 'svg')

重新实现SVG线不起作用

2 个答案:

解决方案

文档