如何在 SVG 图像上做透明圆圈？答案

【问题标题】：How to do transparent circle on SVG image?如何在 SVG 图像上做透明圆圈？
【发布时间】：2019-07-28 17:49:40
【问题描述】：

我正在开发像 Worms 这样的 SVG 游戏，但我不知道如何制作 SVG 地形。我用逻辑创建了位图（当子弹击中地形时，它会形成火山口）。现在我知道我在位图上给出 SVG 地形（img），每次子弹击中地形时，它都会绘制 svg 圆圈。我知道怎么做 svg 圆圈，但我看不到背景，因为圆圈隐藏了我的背景。所以我的问题是：如何在 SVG 图像上制作透明圆圈？

这就是我所做的https://imgur.com/a/bPHjthi

这就是我想要的 https://imgur.com/a/ZT54RxI 但 SVG。

感谢帮助

【问题讨论】：

请提供您的问题的背景

标签： css svg mask

【解决方案1】：

您可以使用 fill 属性控制 svg 圆圈的背景，请参阅 here。但我不确定设置fill: none 或fill: transparent 是否会达到你想要的效果，你只会看到圆圈中的绿色背景。因此，要从绿色部分“切出”一个圆圈，您需要使用clipPath，参见here；

【讨论】：

【解决方案2】：

为此，我将使用 clipPath。为了从多边形中剪出一个圆圈，您需要一条路径：一个与 svg 画布一样大的矩形，其中有一个圆孔：

<svg viewBox="0 0 100 100" width="300">
<path d="M0,0h100v100h-100v-100M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</svg>

路径由一个矩形构成：M0,0h100v100h-100v-100M60,50 顺时针绘制，一个圆圈逆时针绘制。对于半径为 10 且中心位于 {x:50,y:50} 的圆，您可以执行以下操作：M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0。

接下来，您使用此路径作为剪切路径来对多边形进行穿孔：

svg{border:1px solid;background:gold}

<svg viewBox="0 0 100 100" width="300">
<clipPath id="clip">
         <path d="M0,0h100v100h-100v-100
                  M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</clipPath>
   
  <polygon points="0,90 70,30 100,80 100,100 0,100" clip-path="url(#clip)" />
    
</svg>

如果您需要从多边形中剪切出多个圆形，您需要通过添加一个新圆形来更改剪切路径的d 属性，如下所示：

d="M0,0h100v100h-100v-100
   M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0
   M40,60a10,10 0 0 0 -20,0a10,10 0 0 0 20,0"

这是一个演示：

svg{border:1px solid;background:gold}

<svg viewBox="0 0 100 100" width="300">
<clipPath id="clip">
         <path d="M0,0h100v100h-100v-100
                  M60,50a10,10 0 0 0 -20,0a10,10 0 0 0 20,0
                  M40,60a10,10 0 0 0 -20,0a10,10 0 0 0 20,0" />
</clipPath>
   
  <polygon points="0,90 70,30 100,80 100,100 0,100" clip-path="url(#clip)" />    
</svg>

【讨论】：