如何修复Chrome中rect.width的Knockout属性绑定控制台报错

这个报错和Knockout绑定逻辑本身无关，是Chrome与Firefox对SVG元素的属性校验时机差异导致的：

• Chrome的HTML解析器在构建DOM树阶段，遇到SVG元素的width/height这类几何属性时，会立刻校验值是否符合SVG规范。此时Knockout还没执行模板替换，属性值里的{{bindingExpression}}属于非法长度值，因此直接抛出控制台错误。后续Knockout完成值替换后功能可正常运行，但初始解析阶段的错误已经被控制台记录。
• Firefox会在首次执行SVG绘制前才校验属性合法性，此时Knockout已经完成绑定替换，因此不会触发报错。

方案1：使用Knockout原生attr绑定（推荐） #

不要直接在原生属性上写{{}}形式的插值模板，改用Knockout原生的attr绑定语法。这种写法下初始DOM不会携带非法的模板字符串，Knockout会在绑定执行阶段直接给属性赋合法值，从根源避免触发Chrome的初始校验：

<svg class="progress-bar">
  <rect class="background" height="100%" width="100%"></rect>
  <rect class="completed" x="0" y="2%" height="96%" data-bind="attr: { width: bindingExpression + '%' }"></rect>
</svg>

如果bindingExpression是带%后缀的ko可观察对象，直接写attr: { width: bindingExpression }即可。

方案2：自定义绑定中转赋值 #

如果不想改动现有插值写法，可以通过自定义绑定做中转，初始状态下不在SVG原生width属性上写非法内容，绑定执行时再给原生属性赋值：
首先注册自定义绑定：

ko.bindingHandlers.svgProgressWidth = {
  update: function (element, valueAccessor) {
    const widthVal = ko.unwrap(valueAccessor());
    element.setAttribute('width', `${widthVal}%`);
  }
};

DOM中使用自定义绑定，初始不给width属性设置非法值：

<svg class="progress-bar">
  <rect class="background" height="100%" width="100%"></rect>
  <rect class="completed" x="0" y="2%" height="96%" data-bind="svgProgressWidth: bindingExpression"></rect>
</svg>

方案3：给属性设置合法初始占位值（改动最小） #

如果一定要在原生属性上用插值语法，可以先给width属性设置一个合法的默认占位值，注意要保证初始解析时属性值完全合法，不要让模板字符串出现在初始属性值里。这种方案仅适用于模板引擎支持属性值部分替换的场景，大部分双花括号插值引擎不支持这种写法，优先选前两种方案。

不要通过重写console.error的方式全局屏蔽报错，这种做法会无差别拦截所有控制台错误，反而会掩盖真正需要排查的代码问题，完全违背清理控制台报错的初衷。

内容的提问来源于stack exchange，提问作者Joshua Frank