SVG - 使用Javascript添加一条线

Question

SVG - 使用Javascript添加一条线

16

我写了一个简单的代码，在我点击按钮时将一行添加到我的 SVG 页面中。

这是 HTML。

<body>
<svg  width="500" height="400">
</svg>
<button id="btn1">Append text</button>
</body>

以及脚本

$(document).ready(function(){
$("#btn1").click(function(){
      $("svg").append(' <line x1="10" y1="10" x2="40" y2="40" style="stroke: black">' );
    console.log("done!");
  });
});

而且 jsfiddle https://jsfiddle.net/dch7xyez/1/

这行代码被添加了，但是不可见。有人能解释一下为什么吗？

- omidh

它被附加了，但你看不见它，所以可能样式有误吗？ - thatOneGuy

@thisOneGuy 我知道它附加了问题，但为什么它不可见呢？我将完全相同的字符串放在HTML上，它就可以工作！但是当我使用JavaScript时它就不会显示。 - omidh

你在哪个UA上运行这个程序？IE无法修复命名空间，因此您的内容将最终位于HTML命名空间而不是SVG命名空间中。 - Robert Longson

@RobertLongson 我在使用火狐浏览器。 - omidh

@omidh "问题是为什么它不可见？" - 不，问题是为什么它不起作用？ - Craicerjack

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- thatOneGuy · Accepted Answer

试试这种方式：https://jsfiddle.net/dch7xyez/2/

var newLine = document.createElementNS('http://www.w3.org/2000/svg','line');
newLine.setAttribute('id','line2');
newLine.setAttribute('x1','0');
newLine.setAttribute('y1','0');
newLine.setAttribute('x2','200');
newLine.setAttribute('y2','200');
newLine.setAttribute("stroke", "black")
$("svg").append(newLine);

在SVG中添加新行时，出现线条无法显示的错误