Firefox Quantum版本下SVG linearGradient遮罩失效问题求助

我懂你遇到的糟心事——这个带垂直渐变遮罩的紫绿横向渐变效果在Chrome里好好的，但Firefox升级到Quantum之后就罢工了。我仔细看了你的SVG代码，找到了问题根源和两种可行的修复方案。

问题原因 #

Firefox Quantum对SVG遮罩（mask元素）的坐标系统处理做了更严格的规范。默认情况下，mask的maskContentUnits属性值是objectBoundingBox，这意味着遮罩内容的坐标是基于遮罩元素边界框的0-1范围，而不是SVG的用户空间百分比。你的渐变用了百分比设置，在这种模式下无法正确映射，导致遮罩没生效。

修复方案1：指定遮罩使用用户空间坐标 #

给mask元素添加maskContentUnits="userSpaceOnUse"属性，让遮罩内容使用和SVG一致的用户坐标系，这样你的百分比渐变设置就能正常工作了：

<svg class="gradient" width="100%" height="100%">
  <linearGradient id="gradientMask" x1="0%" y1="0%" x2="0%" y2="100%">
    <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
    <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"/>
  </linearGradient>
  <linearGradient id="gradientColors" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#74166e" stop-opacity="1"/>
    <stop offset="100%" stop-color="#058038" stop-opacity="1"/>
  </linearGradient>
  <!-- 添加maskContentUnits属性，确保坐标系统匹配 -->
  <mask id="mask" x="0" y="0" width="100%" height="100%" maskContentUnits="userSpaceOnUse">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#gradientMask)" style="stroke:none;"/>
  </mask>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradientColors)" mask="url(#mask)" style="stroke: none;" />
</svg>

修复方案2：调整渐变坐标适配默认遮罩单位 #

如果你不想修改mask的属性，也可以把遮罩渐变的坐标从百分比改成0-1的数值，适配objectBoundingBox的默认单位：

<svg class="gradient" width="100%" height="100%">
  <!-- 把百分比坐标改为0-1范围，适配mask的默认单位 -->
  <linearGradient id="gradientMask" x1="0" y1="0" x2="0" y2="1">
    <stop offset="0%" stop-color="#FFFFFF" stop-opacity="0"/>
    <stop offset="100%" stop-color="#FFFFFF" stop-opacity="1"/>
  </linearGradient>
  <linearGradient id="gradientColors" x1="0%" y1="0%" x2="100%" y2="0%">
    <stop offset="0%" stop-color="#74166e" stop-opacity="1"/>
    <stop offset="100%" stop-color="#058038" stop-opacity="1"/>
  </linearGradient>
  <mask id="mask" x="0" y="0" width="100%" height="100%">
    <rect x="0" y="0" width="100%" height="100%" fill="url(#gradientMask)" style="stroke:none;"/>
  </mask>
  <rect x="0" y="0" width="100%" height="100%" fill="url(#gradientColors)" mask="url(#mask)" style="stroke: none;" />
</svg>

两种方案都能让效果在Firefox Quantum和Chrome里正常显示，方案1更直观，和你原来的代码逻辑更匹配，推荐优先使用。

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