通常/ベル型のブレンドでSVGの線形勾配を定義できますか？

StackOverflow https://stackoverflow.com/questions/3458235

質問

次の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メソッド)

下の2つの長方形は違いを示しています - 左にはありません ベルブレンド、 正しいです ベルブレンド：

alt text

それとも、SVGレンダラーに、色をどのようにブレンドするかを決定することはできますか？

役に立ちましたか？

解決

あなたはaを適用できます gradientTransform 線形勾配に. 。どうやって 利用可能な変換 必要な効果にマップします。

それがうまくいかない場合は、勾配を入力として使用することができます フィルター そしておそらく同様の効果になります。これがそうです 組み合わせをカバーする記事.

他のヒント

GradientTransformは、この種の変換を行うことはできません。赤/白の勾配にベル型の変換を適用するためにフィルターが必要です。

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>
ライセンス： CC-BY-SA と 帰属
所属していません StackOverflow
scroll top