带孔的 SVG 层

Posted 2023-03-06

【中文标题】带孔的 SVG 层

【英文标题】：SVG layer with hole

【发布时间】：2022-01-23 21:06:24

【问题描述】：

我在网上找到了一个 SVG 图层。里面应该有一个透明的洞。但我不知道如何将孔周围的颜色从黑色更改为例如#5BBB74.

<svg viewbox="0 0 100 50" >
  <defs>
    <mask id="mask" x="0" y="0"  >
      <rect x="0" y="0"   fill="#fff"/>
      <circle cx="50" cy="20" r="10" />
    </mask>
  </defs>
  <rect x="0" y="0"   mask="url(#mask)" fill-opacity=""/>    
</svg>

【参考方案1】：

您可以将fill 属性添加到受遮罩影响的矩形中。

<svg viewbox="0 0 100 50" >
  <defs>
    <mask id="mask" x="0" y="0"  >
      <rect x="0" y="0"   fill="#fff"/>
      <circle cx="50" cy="20" r="10" />
    </mask>
  </defs>
  <rect x="0" y="0"   mask="url(#mask)" fill-opacity="" fill="#5BBB74"/>    
</svg>

【讨论】：

谢谢！这很好用.. 时间锁定一消失，我就会接受你的回答。 ?