带孔的 SVG 层

【问题标题】：SVG layer with hole带孔的 SVG 层
【发布时间】：2022-01-23 21:06:24
【问题描述】：

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

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

【问题讨论】：

标签： css svg

【解决方案1】：

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

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

【讨论】：

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