JavaScript/HTML - SVG 箭头未显示在行元素上

Question

我想创建一条带箭头的线。 line 元素包含在 SVG 中的组容器中。我使用以下代码将箭头定义添加到 SVG。

var defs = document.createElementNS("http://www.w3.org/2000/svg", "defs");
var marker = document.createElementNS(
  "http://www.w3.org/2000/svg",
  "marker"
);
marker.setAttributeNS(null, "id", "triangle");
marker.setAttributeNS(null, "refX", 10);
marker.setAttributeNS(null, "refY", 5);
marker.setAttributeNS(null, "markerUnits", 110);
marker.setAttributeNS(null, "markerWidth", 100);
marker.setAttributeNS(null, "markerHeight", 100);
marker.setAttributeNS(null, "orient", "auto");
var path = document.createElementNS("http;//www.w3.org/2000/svg", "path");
path.setAttributeNS(null, "stroke", "black");
path.setAttributeNS(null, "d", "M 0 0 L 10 5 L 0 10 z");
marker.appendChild(path);
defs.appendChild(marker);
currentSVG.appendChild(defs);

但是，箭头没有出现。 它仅在我打开开发人员工具并将标记定义编辑为 SVG 并稍微更改以进行更改时才会显示。 如果不在开发人员工具中进行编辑，SVG 定义和标记端虽然存在但不显示箭头。

Answer 1

您在键入分号而不是冒号时出错。

var path = document.createElementNS(“http; << here