无法创建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
});