适配Chrome URL中#弃用规则却致SVG遮罩失效，求解决方案

我明白你遇到的这个痛点——Chrome对data URI里的#处理规则导致SVG遮罩引用冲突，转义成%23又让遮罩直接失效。别担心，这里有几个可靠的方案能同时满足Chrome的要求和遮罩正常工作：

方案1：使用内联样式动态设置遮罩 #

直接在SVG元素的mask属性里写%23会被浏览器当成字面量解析，无法识别为#；但如果把遮罩引用放在CSS内联样式中，Chrome就能正确解码%23为#，既避开data URI的截断问题，又能让遮罩生效：

<rect x="0" y="0" width="100" height="100" style="mask: url(%23mask)"/>

方案2：给遮罩ID添加唯一前缀 #

Chrome的规则冲突很多时候是因为ID太通用（比如mask），给遮罩ID加一个独特的前缀（比如my-custom-mask），直接用url(#my-custom-mask)引用即可，不需要转义，同时能降低浏览器误判的概率：

<defs>
  <mask id="my-custom-mask" x="0" y="0" width="100" height="100">
    <rect x="0" y="0" width="100" height="100" fill="#fff"/>
    <rect class="rect" x="10" y="10" width="20" height="20"></rect>
  </mask>
</defs>
<rect x="0" y="0" width="100" height="100" mask="url(#my-custom-mask)"/>

为什么直接转义%23会失效？ #

Chrome在解析SVG原生属性中的url()值时，不会自动解码URL编码字符，所以%23会被当成ID的一部分，而不是#的转义，自然找不到对应的遮罩元素。但在CSS样式（包括内联样式）中，浏览器会按照URL规则解码%23，因此能正确匹配遮罩ID。

修正后的完整代码示例 #

svg { width: 500px; height: 500px; }

<!-- 方案1：内联样式转义版（兼容Chrome） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- 遮罩定义 -->
  <defs>
    <mask id="mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="#fff"/>
      <rect class="rect" x="10" y="10" width="20" height="20"></rect>
    </mask>
  </defs>
  <!-- 内联样式设置遮罩 -->
  <rect x="0" y="0" width="100" height="100" style="mask: url(%23mask)"/>
</svg>

<!-- 方案2：唯一ID版（无需转义） -->
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
  <!-- 遮罩定义 -->
  <defs>
    <mask id="unique-svg-mask" x="0" y="0" width="100" height="100">
      <rect x="0" y="0" width="100" height="100" fill="#fff"/>
      <rect class="rect" x="10" y="10" width="20" height="20"></rect>
    </mask>
  </defs>
  <!-- 直接引用唯一ID -->
  <rect x="0" y="0" width="100" height="100" mask="url(#unique-svg-mask)"/>
</svg>

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