应该怎么做才能使 svg 蒙版起作用？

Question

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

我想得到这样的结果，但只针对img标签。

这是我的尝试。

img {
  display: block;
  width: 100%;
  height: 100%;
  mask: url(#mask);
  -webkit-mask: url(#mask);
}

html,
body {
  margin: 0;
}

.item {
  width: 450px;
  position: fixed;
  top: 0;
  left: 0;
  z-index: -1;
}

svg {
  border: 1px solid red;
}

circle {
  fill: #fff;
  stroke: red;
  stroke-width: 30px;
}

<div class="item">
  <img src="https://images.pexels.com/photos/2111143/pexels-photo-2111143.jpeg?cs=srgb&dl=pexels-oratto-oficial-2111143.jpg&fm=jpg" alt="">
</div>

<svg width="450px" height="450px">
    <mask id="mask">
      <rect width="100%" height="100%" fill="#000"/>
      <circle cx="170" cy="140" r="80"/>
      <circle cx="250" cy="280" r="150"/>
    </mask>
</svg>

Answer 1

不用SVG也能达到你想要的效果

img {
  --c:radial-gradient(farthest-side,#000 calc(100% - 9px), #0002 calc(100% - 8px) 99%,#0000);
  -webkit-mask:
    var(--c) 100% 100%/80% 80%,
    var(--c) 20%  20% /40% 40%;
  -webkit-mask-repeat:no-repeat;
}

<img src="https://picsum.photos/id/1/200/200" >

应该怎么做才能使 svg 蒙版起作用？

What should be done to make the svg mask work?

css

svg

mask