已注释的JS代码行仍触发浏览器报错的原因咨询

你遇到的这个问题确实挺让人摸不着头脑的，我来给你拆解下背后的核心原因：

这本质是XML解析器和JS引擎的执行顺序冲突导致的——SVG是基于XML的格式，当浏览器加载你的SVG文件（或者HTML里的SVG块）时，会先由XML解析器对整个文档做完整解析，这个过程发生在JS引擎执行任何代码之前。

你那些被JS注释（不管是//单行注释还是/* */多行注释）包裹的代码里，包含了<textPath startOffset="'+offset+'%"...这样的内容，XML解析器完全不知道这是JS字符串的一部分，更不知道它被JS注释掉了——它会把<textPath>当成一个真实的SVG元素去解析，然后检查startOffset属性的值：'+offset+'%，这个值显然不是SVG规范要求的合法长度格式（解析器不知道这是要在JS里动态替换的变量），所以直接抛出了你看到的Error: <textPath> attribute startOffset: Expected length, "'+offset+'%".错误，根本轮不到JS引擎去识别这是注释内容。

那怎么解决呢？给你两个靠谱的方案：

• 方案一：给SVG里的<script>代码加上CDATA标记，明确告诉XML解析器“这块内容是纯字符数据，别把里面的标签当成XML元素解析”，比如：

<script type="text/javascript"><![CDATA[
// 现在不管是正常代码还是注释里的内容，都不会被XML解析器干扰了
// asdf += '<text font-family="sans-serif" font-size="14" fill="#1a202c"><textPath startOffset="'+offset+'%" xlink:href="#weeks-path">'+i+'</textPath></text>';
/* asdf += '<text font-family="sans-serif" font-size="14" fill="#1a202c"><textPath startOffset="'+offset+'%" xlink:href="#weeks-path">'+i+'</textPath></text>';*/
]]></script>

• 方案二：如果你的JS代码比较多，干脆把JS逻辑抽成外部文件，用src属性引入<script type="text/javascript" src="your-script.js"></script>，外部JS文件的内容不会被XML解析器处理，自然就不会有这个问题了。

另外补充下：你在Firefox和Chrome里都遇到同样的问题，是因为现代浏览器对SVG的XML解析规则都是严格遵循W3C规范的，所以表现一致。

内容来源于stack exchange