我可以在SVG中用正常/钟形混合定义线性渐变吗？

考虑以下SVG片段：我可以在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 method类似）示区别 - 左边是没有钟交融，右边是与钟，共混物：

alt text

或者是留下来的SVG渲染器决定如何将颜色混合在一起？

来源

2010-08-11 GarethOwen

您可以申请gradientTransform to a linear gradient。我不确定available transforms如何映射到您所需的效果。

如果这不起作用，您可以使用渐变作为filter的输入，并且可能最终会产生类似的效果。这里是an article which covers combining filters。

来源

2010-08-11 23:13:59 robertc

+1谢谢罗伯特 - 我会做一些试验，看看我能否创建一个更好的线性渐变，使用过滤器的标准。 – GarethOwen 2010-08-12 07:50:31

文章不存在 – 2015-01-11 12:23:46

此过滤器将应用钟形转换为红色/白色渐变。 enter image description here 。

原始位于左侧，转化为右侧。曲线不是非常精细（只有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>

来源

2014-01-08 23:45:07

我可以在SVG中用正常/钟形混合定义线性渐变吗？

回答

相关问题