1

考虑以下 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 渲染器来决定颜色应该如何混合在一起？

4

2 回答 2

3

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>
于 2014-01-08T23:45:07.760 回答
1

您可以将 agradientTransform应用于线性渐变。我不确定可用的转换如何映射到您所需的效果。

如果这不起作用，您可以使用渐变作为过滤器的输入，并且可能最终得到类似的效果。这是一篇介绍组合过滤器的文章。

于 2010-08-11T23:13:59.840 回答