Question

当我点击按钮

时，我写了一个简单的代码来在我的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/

该行会被追加，但不可见。任何人都可以向我解释原因吗？

Answer 1

尝试这样做：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);

add a new line in svg, bug cannot see the line

SVG - 使用Javascript添加一行

1 个答案: