拉伸SVG面膜而不拉伸?

编程入门行业动态更新时间:2024-10-22 08:35:01

本文介绍了拉伸SVG面膜而不拉伸?的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！问题描述

我试图在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; }

我现在要做的是将黑色填充扩展到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; }