在svg中混合多渐变

Question

我想创建这个模板。 在此处输入图像描述

我认为我应该使用 svg，因为我认为没有其他方法可以创建带圆角的梯形。

到目前为止没问题

现在看看中间的背景。 这个背景由 3 个部分组成，我们可以用线性渐变创建它。

到目前为止没问题

我的问题是，如果我们查看中间项的背景，我们会看到第一部分和第二部分从左下角到右上角有一个内部渐变。

我们如何创建这样的渐变？

Answer 1

在这个例子中，我有两个线性渐变，它们在同一个蒙版中使用。 然后将掩码应用于<rect> 。 也许它可以做得更简单，但这里的优点是可以为<rect>定义“前景”颜色作为填充并轻松设置样式。 使用遮罩时，被遮罩的元素的一部分或多或少是透明的。 在这里，我在第一个<rect>中定义了“背景”颜色。 你可以看到，如果你改变这种颜色（从白色变成别的颜色），渐变的浅色区域就会有那种颜色。

很难看出您提供的图像中的线条是直的还是有曲线的 - 如果是这样，线性渐变 ( #g1 ) 可以替换为应用于蒙版中超大元素的径向渐变。

 <svg xmlns="http//www.w3.org/2000/svg" width="300" viewBox="0 0 10 7"> <defs> <linearGradient id="g1" gradientTransform="rotate(5)"> <stop offset="0%" stop-opacity="1" stop-color="white" /> <stop offset="20%" stop-opacity=".8" stop-color="white" /> <stop offset="21%" stop-opacity="1" stop-color="white" /> <stop offset="50%" stop-opacity=".8" stop-color="white" /> <stop offset="51%" stop-opacity="1" stop-color="white" /> <stop offset="100%" stop-color="white" /> </linearGradient> <linearGradient id="g2" gradientTransform="rotate(90)"> <stop offset="40%" stop-opacity="0" stop-color="white" /> <stop offset="90%" stop-opacity="1" stop-color="white" /> </linearGradient> <mask id="m1"> <rect width="10" height="7" fill="url(#g1)" /> <rect width="10" height="7" fill="url(#g2)" /> </mask> </defs> <rect width="10" height="7" fill="white" /> <rect width="10" height="7" fill="#7d63eb" mask="url(#m1)"/> </svg>