我可以用正常/钟形混合物定义SVG中的线性梯度吗?
-
27-09-2019 - |
题
考虑以下SVG片段:
<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>
是否有一种方法可以使用钟形曲线将颜色混合在一起? (类似于 GDI+ Lineargradientbrush :: SetBlendBellShape方法)
下面的两个矩形显示差异 - 左没有 贝尔混合, 正确 贝尔混合:
还是留给SVG渲染器来决定如何将颜色混合在一起?
解决方案
您可以应用 gradientTransform
到线性梯度. 。我不确定如何 可用的变换 映射到您所需的效果。
如果那不起作用,您可以将梯度用作一个输入 筛选 也许最终产生了类似的效果。这是 涵盖结合过滤器的文章.
其他提示
GradientTransform不能进行这种转换。您将需要一个过滤器将钟形变换应用于红色/白色梯度。
.
原始的左侧,在右侧转换。曲线不是很细的(只有15个值),因此您可能想为大梯度使用更多术语。
<svg width="500px" height="500px" viewbox="0 0 800 800">
<defs>
<filter id="bellTransform" color-interpolation-filters="sRGB">
<feComponentTransfer>
<feFuncG type="table" tableValues=
"0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/>
<feFuncB type="table" tableValues=
"0.0000 0.0059 0.0166 0.0346 0.0628 0.1038 0.1586 0.2259 0.3011 0.3761 0.4406 0.4844 0.5000 0.5156 0.5594 0.6239 0.6989 0.7741 0.8414 0.8962 0.9372 0.9654 0.9834 0.9941 1.0000"/>
</feComponentTransfer>
</filter>
</defs>
<linearGradient id="redgradient" x1="0%" x2="0%" y1="0%" y2="100%">
<stop offset="0%" stop-color="#ffffff"/>
<stop offset="100%" stop-color="#ff0000"/>
</linearGradient>
<rect filter="url(#bellTransform)" x="410" y="0" width="400" height="400" fill="url(#redgradient)"/>
<rect x="0" y="0" width="400" height="400" fill="url(#redgradient)"/>
</svg>
不隶属于 StackOverflow