为何使用<use>标签后SVG遮罩半透明？如何复用图形并保持不透明？

问题现象 #

两段SVG代码仅在遮罩#m1的实现上有区别：代码块1直接在遮罩内定义黑色圆形，遮罩效果正常；代码块2用<use>复用页面上的#p1圆形，并设置fill="black"，却导致遮罩变成半透明。

原因分析 #

核心问题是CSS样式优先级冲突：

• 你给#p1设置了fill:blue，这是ID选择器，优先级远高于<use>标签上的fill="black"属性。
• 当遮罩里的<use>引用#p1时，实际应用的是#p1的蓝色填充，而非你设置的黑色。
• SVG遮罩的透明度由元素亮度决定：白色（亮度100%）完全显示下方元素，黑色（亮度0%）完全隐藏，蓝色亮度介于两者之间，因此遮罩呈现半透明效果。

另外还有一个隐性问题：#p1的定义在<defs>之后，浏览器解析遮罩时#p1还未完全加载，但这不是主要原因——即使调整顺序，样式优先级冲突的问题依然存在。

解决方法 #

方法1：将复用元素放到<defs>中作为模板 #

把#p1移到<defs>里作为可复用的基础图形，页面上的蓝色圆形和遮罩里的黑色圆形都通过<use>引用，用类样式控制页面圆形的颜色，避免ID样式干扰遮罩内的复用元素：

<style>
  svg { background-color:#aaa }
  .circle-blue { fill:blue }
  #p2 { fill:red }
  #p3 { fill:green }
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <circle id="p1" r="65" cx="150" cy="100" />
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
      <use href="#p1" fill="black" />
    </mask>
  </defs>
  <use href="#p1" class="circle-blue" />
  <circle id="p2" r="65" cx="180" cy="175" />
  <circle id="p3" r="65" cx="100" cy="175" mask="url(#m1)" />
  <circle r="45" cx="150" cy="150" fill="white" />
</svg>

方法2：用更具体的CSS选择器覆盖样式 #

如果不想调整元素位置，可以给遮罩内的<use>设置更高优先级的样式（不推荐频繁使用!important，会增加维护成本）：

#m1 use {
  fill: black !important;
}

方法3：使用CSS变量统一管理属性 #

用CSS变量定义圆形的尺寸和位置，在遮罩内直接使用变量创建圆形，既实现复用又避免样式冲突：

<style>
  svg { 
    background-color:#aaa;
    --circle-r:65;
    --circle-cx:150;
    --circle-cy:100;
  }
  #p1 { fill:blue }
  #p2 { fill:red }
  #p3 { fill:green }
</style>
<svg width="300" height="300" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <mask id="m1">
      <rect width="100%" height="100%" fill="white" />
      <circle r="var(--circle-r)" cx="var(--circle-cx)" cy="var(--circle-cy)" fill="black" />
    </mask>
  </defs>
  <circle id="p1" r="var(--circle-r)" cx="var(--circle-cx)" cy="var(--circle-cy)" />
  <circle id="p2" r="65" cx="180" cy="175" />
  <circle id="p3" r="65" cx="100" cy="175" mask="url(#m1)" />
  <circle r="45" cx="150" cy="150" fill="white" />
</svg>

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