JS动态创建SVG line元素的marker箭头无法正常显示问题

箭头首次加载无法渲染、手动编辑开发者工具后才生效，是代码中存在明确错误导致的：

• 创建箭头内部<path>元素时，SVG命名空间拼写错误：你写的地址是http;//www.w3.org/2000/svg，协议部分错误使用了分号;而非冒号:，浏览器会将这个path识别为未知的普通元素，而非合法SVG路径，marker内的箭头形状根本没有被SVG渲染引擎解析。在开发者工具中编辑时，浏览器会自动修正元素命名空间，所以修改后箭头会突然显示。
• markerUnits属性赋值非法：该属性仅支持strokeWidth（默认值，箭头随线条描边宽度缩放）、userSpaceOnUse（箭头使用固定坐标尺寸）两个合法值，你传入的110是无效值，会导致箭头尺寸计算规则失效，无法匹配到线条上渲染。
• 定义插入顺序存在兼容问题：如果<defs>定义是在已经引用marker的<line>元素之后才插入SVG，部分浏览器首次渲染时不会回溯加载后面定义的标记，导致箭头找不到资源。
• 额外细节问题：你给path只设置了stroke属性没有设置fill，就算箭头渲染出来也是空心三角形，不符合常规箭头样式，且100的marker宽高设置过大，会导致箭头显示尺寸异常。

修正上述错误即可，修复后完整代码如下：

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);
// 修正markerUnits为合法值，使用固定尺寸模式
marker.setAttributeNS(null, "markerUnits", "userSpaceOnUse");
// 调整箭头标记尺寸适配路径大小
marker.setAttributeNS(null, "markerWidth", 10);
marker.setAttributeNS(null, "markerHeight", 10);
marker.setAttributeNS(null, "orient", "auto");
// 修正命名空间拼写错误，将分号改为冒号
var path = document.createElementNS("http://www.w3.org/2000/svg", "path");
// 补充fill属性实现实心箭头
path.setAttributeNS(null, "fill", "black");
path.setAttributeNS(null, "d", "M 0 0 L 10 5 L 0 10 z");
marker.appendChild(path);
defs.appendChild(marker);
// 将defs插入到SVG节点最前面，保证引用标记时定义已经存在
currentSVG.insertBefore(defs, currentSVG.firstChild);

内容的提问来源于stack exchange，提问作者Nikhil