Chrome中SVG text元素transform属性报错，Safari运行正常

这个问题我之前也碰到过，根源是SVG原生transform属性和CSS transform的语法规则不一样，给你两个简单可行的修复方案：

方案1：修改SVG transform的参数分隔方式 #

Chrome严格遵循SVG规范，translate()在SVG原生transform属性里要求用空格分隔多个参数（不管是数值还是百分比），把你代码里的逗号换成空格就行：

<text transform="translate(-50% -50%)" text-anchor="middle" class="st11 st13" x="389" y="440" font-family="Roboto Condensed" style="fill: #ffffff"> 99 </text>

方案2：把transform移到style属性中（更贴近CSS写法） #

如果你更习惯用逗号分隔参数的CSS写法，可以把transform放到style属性里，这样Chrome和Safari都能正常解析：

<text text-anchor="middle" class="st11 st13" x="389" y="440" font-family="Roboto Condensed" style="fill: #ffffff; transform: translate(-50%, -50%)"> 99 </text>

补充说明 #

• Safari对语法兼容性更宽松，允许在SVG transform里用逗号分隔参数，所以之前能正常显示；
• Chrome严格执行SVG规范，逗号分隔的百分比参数会被判定为非法语法，因此抛出Error: attribute transform: Expected ')'的错误。

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