Gradiente SVG per il percorso perfettamente orizzontale

Question

Sto utilizzando svg per disegnare grafici a linee e richiedono l'applicazione di un gradiente. Per ogni linea, utilizzo un elemento path e imposta il tratto su uno dei miei elementi lineargradient.

Questo funziona benissimo per tutto tranne che per linee puramente orizzontali - in questo caso, non ottengo alcun colore sulla mia linea.

Ho fatto un violino che mostra il problema: http://jsfiddle.net/b6EQT/

<svg> 
    <defs> 
     <linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%"> 
      <stop class="" offset="0%" style="stop-color: red;"></stop> 
      <stop class="" offset="33%" style="stop-color: yellow;"></stop> 
      <stop class="" offset="66%" style="stop-color: pink;"></stop> 
      <stop class="" offset="100%" style="stop-color: blue"></stop> 
     </linearGradient> 
    </defs> 
<-- Gradient not applied --> 
<path stroke="url(#grad)" d="M20,20L400,20" style="stroke-width: 10px;"></path> 

<-- Gradient applied since height of 1px --> 
<path stroke="url(#grad)" d="M20,40L400,41" style="stroke-width: 10px;"></path> 

<-- Gradient applied because of fake initial "move to" --> 
<path stroke="url(#grad)" d="M-1,-1,M20,60L400,60" style="stroke-width: 10px;"></path> 
</svg>​ 

La linea orizzontale pura (primo percorso) non viene visualizzata, e la seconda (leggero cambiamento nel y) lo fa.

Ho provato un piccolo trucco per farlo funzionare - mettendo un falso M-1, -1 all'inizio, che sembra aggirare il problema in IE e Chrome, ma non Firefox. Questo mi fa pensare che mi manchi qualcosa nella mia comprensione dei gradienti e dei percorsi SVG. C'è un modo per farlo funzionare?

Answer 1

L'impostazione predefinita per gradientUnits è objectBoundingBox. Il problema chiave che hai è descritto nell'ultimo paragrafo di specification text. Perché non utilizzare un rect con un riempimento piuttosto che un percorso con un tratto se hai una linea orizzontale? In alternativa, usa le unità userSpaceOnUse.

Answer 2

gradientUnits = "userSpaceOnUse" può risolvere il problema.

Demo

<linearGradient id="grad" x1="0%" x2="100%" y1="0%" y2="0%" gradientUnits="userSpaceOnUse"> 
     <stop class="" offset="0%" style="stop-color: red;"></stop> 
     <stop class="" offset="33%" style="stop-color: yellow;"></stop> 
     <stop class="" offset="66%" style="stop-color: pink;"></stop> 
     <stop class="" offset="100%" style="stop-color: blue"></stop> 
</linearGradient> 

More detail answer