在 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 状态，但未应用。

有趣.. 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
将元素 'inplace' 移动到 本身

之前

移动重绘具有正确fill-rule状态的多边形
（但您可能会因动画而产生不需要的副作用）

所以下面的代码片段在点击时有不正确的行为（在 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>

在 chrome 中使用 javascript 设置 SVG 属性

Setting SVG Attributes with javascript in chrome

javascript

svg

attributes

google-chrome