如何检测标准 HTML 或 SVG 属性的值无效答案

【问题标题】：How to detect that the value for a standard HTML or SVG attribute is not valid如何检测标准 HTML 或 SVG 属性的值无效
【发布时间】：2022-08-19 02:36:22
【问题描述】：

给定一个像这样的 SVG 的 sn-p：

<path d=\"...\" fill-rule=\"invalid-value\" />

检测 fill-rule 属性值无效的最佳 in-JS 方法是什么？在 MDN 规范中，它必须是 nonzero 或 evenodd。

我想验证所有标准属性，并试图避免为每个标准属性编写自定义解析器。

w3c 有an online validator 我希望你能找到其他人。
那么你想走多远呢？验证者不会抱怨 fill=\"redish\"

标签： javascript html svg

【解决方案1】：

在某种程度上，您可能会发现无效值比较属性和计算的样式值。

let els = document.querySelectorAll("path, polygon");
els.forEach(function(path) {
  let fiilRuleAtt = path.getAttribute("fill-rule");
  let pathStyle = window.getComputedStyle(path);
  let fiilRuleStyle = pathStyle.fillRule;

  if (fiilRuleAtt != fiilRuleStyle) {
    console.log(`${path.id}  has invalid attribute value: "${fiilRuleAtt}". Reset to css value: ${fiilRuleStyle}`);
  }
});

svg {
  width: 50%;
  display: inline-block;
}

<svg viewBox="-10 -10 320 120" xmlns="http://www.w3.org/2000/svg">
  <polygon id="star" fill-rule="nonzero" stroke="red" points="50,0 21,90 98,35 2,35 79,90" />
  <path id="rect1" fill-rule="nonsenseFillRule" stroke="red" d="M110,0  h90 v90 h-90 z
           M130,20 h50 v50 h-50 z" />
  <path id="rect2" fill-rule="nonzero" stroke="red" d="M210,0  h90 v90 h-90 z
           M230,20 v50 h50 v-50 z" />
</svg>

但很可能你也会收到新/实验功能的误报您当前的浏览器尚不支持。

【讨论】：