无需拉伸即可扩展SVG蒙版？

Question

我正在尝试在SVG中产生“光源”效果，我将切出一段覆盖图像的黑暗区域。我几乎得到了我需要的东西，但是我正在努力研究如何完成最后一件作品。首先，这是我的例子

.background {
  width: 500px;
  height: 500px;
  background: red;
}

.light {
  fill: black;
}

<div class="background">
  <svg width="500" height="500">
    <defs>
      <radialGradient id="radGrad">
        <stop offset="0" stop-color="white" stop-opacity="0" />
        <stop offset="1" stop-color="white" stop-opacity="1" />
      </radialGradient>
      <mask id="hole">
        <rect x="0" y="0" width="500" height="500" fill="black"></rect>
        <circle cx="250" cy="250" r="155" fill="url(#radGrad)" />
      </mask>
    </defs>
    <rect class="light" x="0" y="0" width="500" height="500" mask="url(#hole)"></rect>
  </svg>
</div>

我现在要做的是将黑色填充扩展到SVG的其余部分，但保持径向渐变尺寸。我似乎无法弄清楚如何做到这一点。事实上，我忘记取出的<rect>中的额外<mask>是我尝试这样做的。

我想要得到的影响是：

但到目前为止，最接近的是通过增加圆的半径，然而这增加了透明度的区域，这不是我想要的。我在这里错过了一些非常简单的东西吗？

Answer 1

只需将渐变应用于矩形即可。不需要额外的圈子。

你只需稍微调整渐变。

.background {
  width: 500px;
  height: 500px;
  background: red;
}

.light {
  fill: black;
}

<div class="background">
  <svg width="500" height="500">
    <defs>
      <radialGradient id="radGrad" r="0.31">
        <stop offset="0" stop-color="black" />
        <stop offset="1" stop-color="white" />
      </radialGradient>
      <mask id="hole">
        <rect x="0" y="0" width="500" height="500" fill="url(#radGrad)" />
      </mask>
    </defs>
    <rect class="light" x="0" y="0" width="500" height="500" mask="url(#hole)" />
  </svg>
</div>