Posso definir um gradiente linear no SVG com uma mistura normal/em forma de sino?

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

Pergunta

Considere o seguinte snippet 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)"/>

Existe uma maneira de especificar que as cores devem ser misturadas usando uma curva em forma de sino? (Semelhante ao GDI+ LinearGradientBrush :: SetBlendBellShape Method)

Os dois retângulos abaixo mostram a diferença - Esquerda está sem Bell Blend, à direita está com Bell Blend:

alt text

Ou é deixado para o renderizador do SVG decidir como as cores devem ser misturadas?

Foi útil?

Solução

Você pode aplicar um gradientTransform para um gradiente linear. Não tenho certeza de como o Transformações disponíveis Mapeie para o seu efeito necessário.

Se isso não funcionar, você pode usar o gradiente como entrada para um filtro E talvez acabem com um efeito semelhante. Aqui está Um artigo que abrange combina filtros.

Outras dicas

O gradientetransform não pode fazer esse tipo de transformação. Você precisará de um filtro para aplicar uma transformação em forma de sino em um gradiente vermelho/branco.

enter image description here.

Original à esquerda, transformado à direita. A curva não é muito fina (apenas 15 valores), então você provavelmente gostaria de usar mais termos para um grande gradiente. 

  <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 em: CC-BY-SA com atribuição
Não afiliado a StackOverflow
scroll top