代码之家 › 专栏 › 技术社区 › GarethOwen

我可以用普通/钟形混合定义SVG中的线性渐变吗?

svg-filters linear-gradients svg graphics

GarethOwen · 技术社区 · 16 年前

考虑下面的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))

下面的两个矩形显示了差异-Left is withoutBell Blend,Right is withBell Blend:。


。

还是由SVG渲染器决定颜色应该如何混合在一起?


   
    
     
      
       有没有一种方法可以规定颜色应该使用钟形曲线混合在一起?
(类似于
       
        GDI+ LinearGradientBrush::SetBlendBellShape method
       
       )
      
      
       下面的两个矩形显示了不同之处-
       
        左边是没有
       
       贝尔混合
       
        右边是
       
       贝尔混合:
      
      
       
      
      
      
      
       还是由SVG渲染器决定颜色应该如何混合在一起?

2 回复 | 直到 7 年前

Michael Mullany 7 年前

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

如果不起作用,可以使用渐变作为 filter 最后可能会产生类似的效果。这里是 an article which covers combining filters .

Michael Mullany 7 年前

GradientTransform不能进行这种转换。你需要一个过滤以对红/白渐变应用钟形转换。

。

左边是原始的,右边是变形的。曲线的纹理不是很细(只有15个值),因此您可能希望对较大的渐变使用更多的术语。

<svg width=“500px”height=“500px”viewbox=“0 0 800 800”>
DFS & GT;
<filter id=“BellTransform”color interpolation filters=“sRGB”>
<fecomponenttransfer>
<fefuncg type=“table”表值=
“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”/>gt;
<fefuncb type=“table”表值=
“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”/>gt;
</fecomponenttransfer>
& lt;/过滤器& gt;
和/或DEFS & GT;

<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 & GT;
< /代码> 
将钟形变换应用于红/白渐变。

.

左边是原始的,右边是变形的。曲线的纹理不是很细(只有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>