SVG标记结束仅在未动态创建时出现(innerHTML = innerHTML)



这是一个相当显著的错误,我仍然不确定如何解决它。善意的解释是,我把document.createElementNS的语义搞错了,而不那么善意的解释是,每个主要浏览器都有一个bug。我希望是前者。

当动态创建带有marker-end的SVG路径时,使用url(#id)<marker>的引用,marker-end不呈现。但是,当一次性插入相同的HTML源时,可以正确呈现。参见下面的示例。当你按下"做好"键时;按钮,运行的唯一代码是:svg.innerHTML = svg.innerHTML!正如您应该看到的,箭头只在单击按钮时出现。

const elem = document.createElementNS("http://www.w3.org/2000/svg", "g");
const id = `arrowhead_2`;
const marker = document.createElementNS(
"http://www.w3.org/2000/svg",
"marker"
);
marker.setAttribute("id", id);
marker.setAttribute("markerUnits", "strokeWidth");
marker.setAttribute("markerWidth", "6.97");
marker.setAttribute("markerHeight", "5.68");
marker.setAttribute("viewBox", "0 0 9.95 8.12");
marker.setAttribute("refX", "2.36");
marker.setAttribute("refY", "4.06");
marker.setAttribute("orient", "auto-start-reverse");
const path = document.createElementNS("svg", "path");
path.setAttribute("d", "M9.95 4.06 0 8.12 2.36 4.06 0 0 9.95 4.06z");
path.setAttribute("fill", "#00cc00");
path.setAttribute("fill-opacity", "1");
marker.appendChild(path);
const arrow = document.createElementNS("http://www.w3.org/2000/svg", "g");
arrow.appendChild(marker);
const arrowPath = document.createElementNS("http://www.w3.org/2000/svg", "path");
arrowPath.setAttribute("d", "M0 10 L10.0981265193531 28.49209939676484");
arrowPath.setAttribute("marker-end", `url(#${id})`);
arrowPath.setAttribute("fill", "#00cc00");
arrowPath.setAttribute("fill-opacity", "1");
arrowPath.setAttribute("stroke", "#00cc00");
arrowPath.setAttribute("stroke-width", "3");
arrow.appendChild(arrowPath);
const svg = document.getElementById("mysvg");
svg.appendChild(arrow);
document.getElementById("makegood").onclick = () => {
svg.innerHTML = svg.innerHTML; 
};
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
</head>
<body>
<button id="makegood">make it good</button>
<svg
id="mysvg"
width="100%"
height="100%"
version="1.2"
viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg"
></svg>
</html>

我很感激你的帮助!

Robert在评论中指出了这一点,就是这一行

const path = document.createElementNS("svg", "path");

实际上应该是

const path = document.createElementNS("http://www.w3.org/2000/svg", "path");

最新更新