¿Puedo definir un gradiente lineal en SVG con una mezcla normal/en forma de campana?

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

Pregunta

Considere el siguiente fragmento 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)"/>

¿Hay alguna forma de especificar que los colores se deben mezclar usando una curva en forma de campana? (Similar a GDI+ linealgradientbrush :: setblendbellshape método)

Los dos rectángulos a continuación muestran la diferencia - la izquierda es sin Bell Blend, bien es con Bell Blend:

alt text

¿O se deja al renderizador de SVG para decidir cómo se deben mezclar los colores?

¿Fue útil?

Solución

Puedes aplicar un gradientTransform a un gradiente lineal. No estoy seguro de cómo el Transformaciones disponibles mapa a su efecto requerido.

Si eso no funciona, puede usar el gradiente como la entrada a un filtrar y tal vez terminar con un efecto similar. Aquí es un artículo que cubre los filtros de combinación.

Otros consejos

GradientTransform no puede hacer este tipo de transformación. Necesitará un filtro para aplicar una transformación en forma de campana a un gradiente rojo/blanco.

enter image description here.

Original a la izquierda, transformado a la derecha. La curva no es muy fina (solo 15 valores), por lo que probablemente desee usar más términos para un gradiente grande. 

  <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>
Licenciado bajo: CC-BY-SA con atribución
No afiliado a StackOverflow
scroll top