Firefox中SVG Use/Defs元素显示异常问题咨询

我之前也踩过这个坑！这其实不是你的操作失误，而是Chrome和Firefox对SVG <use> 元素的坐标处理存在差异——严格来说，Firefox的表现是符合SVG规范的，Chrome反而做了“非规范”的兼容优化。

问题根源 #

当你在 <defs> 里定义的矩形本身带有 x 和 y 属性时，使用 <use> 引用它时，Firefox会将 <use> 的 x/y 与矩形自身的 x/y 叠加计算最终位置；而Chrome则会自动忽略引用图形自身的 x/y，只以 <use> 的 x/y 作为最终定位坐标。这就导致了Firefox里引用的矩形出现偏移，而Chrome里两者完全重叠。

举个例子，假设你代码结构是这样的：

<!-- 直接绘制的矩形 -->
<rect x="10" y="10" width="50" height="50" fill="blue" opacity="0.5"/>
<!-- defs里的矩形 -->
<defs>
  <rect id="rect" x="10" y="10" width="50" height="50" fill="red" opacity="0.5"/>
</defs>
<!-- 引用的矩形 -->
<use href="#rect" x="10" y="10"/>

那Firefox里引用的矩形最终位置是 x=10+10=20，y=10+10=20，自然就偏移了；而Chrome里直接用 <use> 的 10,10 作为位置，所以和第一个矩形重叠。

解决办法 #

有几种简单的方式可以让两个浏览器表现一致：

• 方法一：重置defs里图形的x/y为0
  把 <defs> 里的矩形坐标设为 x="0"、y="0"，完全通过 <use> 的 x/y 来控制位置：

  <defs>
    <rect id="rect" x="0" y="0" width="50" height="50" fill="red" opacity="0.5"/>
  </defs>
  <use href="#rect" x="10" y="10"/>
  

  这样不管哪个浏览器，最终位置都是 <use> 设定的 10,10，两个矩形就会完全重叠。

• 方法二：让的x/y为0
  如果需要保留 <defs> 里矩形的 x/y，那把 <use> 的 x 和 y 都设为 0，这样叠加后的位置就是 <defs> 里矩形的坐标，和直接绘制的矩形一致：

  <use href="#rect" x="0" y="0"/>
  

• 方法三：用transform替代x/y定位
  给 <defs> 里的矩形使用 transform 属性来定位，而不是 x/y，这样 <use> 不需要额外设置坐标也能保持位置一致：

  <defs>
    <rect id="rect" width="50" height="50" fill="red" opacity="0.5" transform="translate(10,10)"/>
  </defs>
  <use href="#rect"/>
  

以上三种方法都能解决Firefox里的偏移问题，你可以根据自己的需求选择合适的方式~

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