Puis-je définir un gradient linéaire dans SVG avec un mélange normal / en forme de cloche?

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

Question

Considérez l'extrait SVG suivant:

<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)"/>

Existe-t-il un moyen de spécifier que les couleurs doivent être mélangées ensemble à l'aide d'une courbe en forme de cloche? (Semblable à la GDI + LineargradIentBrush :: SetblendBellShape Méthode)

Les deux rectangles ci-dessous montrent la différence - à gauche est sans Bell Blend, Le droit est avec Mélange de cloche:

alt text

Ou est-il laissé au rendu SVG pour décider comment les couleurs doivent être mélangées ensemble?

Était-ce utile?

La solution

Vous pouvez appliquer un gradientTransform à un dégradé linéaire. Je ne sais pas comment le Transformes disponibles Carte à votre effet requis.

Si cela ne fonctionne pas, vous pouvez utiliser le gradient comme entrée pour un filtre Et peut-être se retrouver avec un effet similaire. Voici Un article qui couvre la combinaison des filtres.

Autres conseils

gradientTransform cannot do this kind of transformation. You will need a filter to apply a bell shaped transform to a red/white gradient.

enter image description here.

Original on the left, transformed on the right. The curve isn't very fine grained (only 15 values), so you would probably want to use more terms for a large gradient. 

  <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>
Licencié sous: CC-BY-SA avec attribution
Non affilié à StackOverflow
scroll top