我想創建一條帶箭頭的線。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 定義和標記端雖然存在,但不會顯示箭頭。
uj5u.com熱心網友回復:
您輸入了分號而不是冒號,這是一個錯誤。
var path = document.createElementNS(“http; << here
轉載請註明出處,本文鏈接:https://www.uj5u.com/qukuanlian/486835.html
標籤:javascript html svg dom d3.js
上一篇:SVG內容未顯示在頁面中
