javascript - 无法创建 svg 线，但创建 svg 圆可以正常工作

Question

我正在尝试在我的 svg 中创建一个 cicle 和一条线。但由于某种原因，我似乎无法创建/添加该行到我的 svg 中。

这是我的代码:

findTop = wrapper.find("g[data-node-id='1']");
var obj = findTop.parent();
var newobj = obj.clone();

$(obj).append(document.createElementNS("http://www.w3.org/2000/svg", "circle"))

$(obj)
  .parent()
  .find("circle")
  .unwrap()
  .attr("class", "get-btn trigger-btn")
  .attr("data-btn-id", "1")
  .attr("cx", "257.5")
  .attr("cy", "100")
  .attr("r", "20");

$(obj).append(document.createElementNS('http://www.w3.org/2000/svg', 'line'))
  .attr({
    id: "line2",
    x1: 0,
    y1: 0,
    x2: 300,
    y2: 300
  });

有人知道为什么我无法将线条添加到我的 svg 中吗？

Answer 1

这条线确实存在。您需要为其添加笔划:

$(obj).append(document.createElementNS('http://www.w3.org/2000/svg', 'line')).attr({
    id: "line2",
    x1: 0,
    y1: 0,
    x2: 300,
    y2: 300,
    stroke: "red",
    "stroke-width": 2
});