Css 如何使svg掩码工作？

我在svg中画了两个圆圈，并将其应用于html img标记，但它不起作用，或者我做错了什么

我想得到这样一个结果，但仅限于img标签

这是我的尝试

img{
显示：块；
宽度：100%；
身高：100%；
掩码：url（#掩码）；
-webkit掩码：url（#掩码）；
}
html，
身体{
保证金：0；
}
.项目{
宽度：450px；
位置：固定；
排名：0；
左：0；
z指数：-1；
}
svg{
边框：1px纯红；
}
圈{
填充：#fff；
笔画：红色；
笔划宽度：30px；
}

---

您可以在没有SVG的情况下实现您想要的

img{
--c：径向梯度（最远侧，#000 calc（100%-9px），#0002 calc（100%-8px）99%，#0000）；
-网络工具包掩码：
var（--c）100%100%/80%80%，
var（--c）20%20%/40%40%；
-webkit掩码重复：无重复；
}

---

您不能使用该方式的掩码。非常感谢您，svg将无法工作？这样的表单可以any@MaximLensky检查此项以了解如何使用SVG：太酷了。。。。。