拉伸SVG面膜而不拉伸? [英] Extend SVG Mask without stretching?

问题描述

我试图在SVG中产生一种光源"效果，因此我切出了一块遮盖图像的黑暗区域.我几乎满足了我的需求，但是我正在努力找出如何完成最后一部分.首先，这是我要去的地方的例子

I'm trying to produce a "light source" effect within SVG, whereby I cut out a section of darkness that will cover an image. I've almost got what I need, but I'm struggling to work out how to finish off the last piece. First here's my example of where I've got to

.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的其余部分，但要保持径向渐变大小.我似乎无法解决该怎么做.实际上，我忘记带出的<mask>中的其他<rect>是我这样做的尝试.

What I want to do now, is to extend the black fill to the rest of the SVG, but maintain the radial gradient size. I just can't seem to work out how to do it. In fact the additional <rect> within the <mask> that I forgot to take out is my attempt at doing so.

我想要获得的影响是:

但是到目前为止，我最接近的是增加圆的半径，但是这会增加透明区域，这不是我想要的.我在这里错过了一些非常简单的事情吗?

But so far the nearest I've got is by increasing the radius of the circle, however then this increases the area of transparency which isn't what I want. Am I missing something really simple here?

推荐答案

只需将渐变应用于矩形.无需多余的圆圈.

Just apply the gradient to the rectangle. No need for an extra circle.

您只需要稍微调整一下梯度即可.

You just need to tweak your gradient a bit.

.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>

这篇关于拉伸SVG面膜而不拉伸?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！