在 chrome 中使用 javascript 设置 SVG 属性

Question

也许这是 Chrome (88.0.4324.150) svg 渲染的错误，它似乎只能在此浏览器中重现。 但也许我做错了什么？

当我使用 setAttribute 使用 javascript 动态且重复地设置填充模式属性时，尽管在检查器中正确显示，但它并不总是可见应用。 如果 window 得到重绘，例如。 通过调整大小，它突然被应用。

为什么属性变化不显示？ 我是否错过了一些（未记录的）更新调用，或者这只是一个浏览器错误？

您可以在代码段中看到问题，反复单击填充模式链接。

 const doc = document.createElementNS("http://www.w3.org/2000/svg", 'svg'); doc.setAttribute("xmlns", "http://www.w3.org/2000/svg"); doc.setAttribute("viewBox", "0 0 200 200"); doc.setAttribute("width", 200); doc.setAttribute("height", 200); const polygon = document.createElementNS("http://www.w3.org/2000/svg", 'polygon'); polygon.setAttribute('stroke', 'black'); polygon.setAttribute('stroke-width', 3); polygon.setAttribute('fill', 'blue'); polygon.setAttribute('fill-rule', 'evenodd'); polygon.setAttribute('points', '150,100,59,129,115,52,115,147,59,70'); doc.appendChild(polygon); document.getElementById('dest').appendChild(doc); // setting up event handlers [...document.querySelectorAll('[data-color]')].forEach((el) => el.addEventListener( "click", (e) => polygon.setAttribute('fill', e.target.getAttribute('data-color')) ) ); [...document.querySelectorAll('[data-fill-rule]')].forEach((el) => el.addEventListener( "click", (e) => polygon.setAttribute('fill-rule', e.target.getAttribute('data-fill-rule')) ) );

 <a href="#" data-color="red">set red</a> - <a href="#" data-color="green">set green</a> - <a href="#" data-color="blue">set blue</a><br> Problematic, swap multiple: <a href="#" data-fill-rule="evenodd">set evenodd</a> <a href="#" data-fill-rule="nonzero">set nonzero</a> <div id="dest"></div>

Answer 1

绝对是一个错误。
getComputedstyle(polygon).fill-rule显示正确的fill-rule state，但未应用。

有趣.. MDN 页面没有浏览器兼容性信息：
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/fill-rule

一种解决方法是移动SVG内的多边形： this.closest('svg').append(this);

如果你有更复杂的 SVG 你可以使用insertBefore ：
https://developer.mozilla.org/en-US/docs/Web/API/Node/insertBefore
将元素“就地”移动到自身之前

移动使用正确的fill-rule state重绘多边形
（但您可能会通过动画获得不需要的副作用）

• 下面的 SO 代码段在点击时有不正确的行为（在 Chromium 浏览器中）

• 按住 Ctrl 键单击以使用解决方法
  （当上一次点击未应用状态时，当然点击了 2 次）

 <b>Click Red color to toggle fill-rule: evenodd/nonzero</b><br> <svg xmlns="http://www.w3.org/2000/svg" viewBox="50 50 100 100" width="200"> <polygon fill-rule="evenodd" fill="red" points="150,100,59,129,115,52,115,147,59,70" onclick="let fr = this.getAttribute('fill-rule')=='evenodd'? 'nonzero': 'evenodd'; this.setAttribute('fill-rule', fr ); if (event.ctrlKey) this.closest('svg').append(this)"></polygon> </svg>