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メソッドと同様）

下の2つの長方形は違いを示しています。左はベルブレンドなし、右はベルブレンドありです。

代替テキスト

それとも、色をどのようにブレンドするかを決定するのは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

gradientTransform線形勾配にを適用できます。利用可能な変換が必要な効果にどのようにマッピングされるかはわかりません。

それがうまくいかない場合は、フィルターへの入力としてグラデーションを使用して、おそらく同様の効果を得ることができます。これは、フィルターの組み合わせについて説明している記事です。

于 2010-08-11T23:13:59.840 に答える