SVG-Gradient für perfekt horizontalen Pfad

Question

Ich benutze Svg, um Liniendiagramme zu zeichnen, und erfordern einen Farbverlauf auf es angewendet werden. Für jede Zeile verwende ich ein Pfadelement und setze den Strich auf eines meiner linearen Gradientenelemente.

Das funktioniert gut für alles außer rein horizontale Linien - in diesem Fall bekomme ich überhaupt keine Farben auf meiner Linie.

Ich habe eine Geige zeigt das Problem gemacht: 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>​ 

Die reine horizontale Linie (erster Weg) nicht erscheint, und die zweite (leichte Veränderung in y) der Fall ist.

Ich versuchte einen kleinen Hack, um es in Gang zu bringen - eine falsche M-1, -1 am Start, die um das Problem in IE und Chrome, aber nicht Firefox zu arbeiten scheint. Das lässt mich denken, dass ich etwas in meinem Verständnis von SVG-Gradienten und -Wegen verpasse. Gibt es eine Möglichkeit, dies zum Laufen zu bringen?

Answer 1

Der Standardwert für gradientUnits ist objectBoundingBox. Das Hauptproblem, das Sie haben, ist im letzten Absatz der specification text beschrieben. Warum verwenden Sie nicht ein Rechteck mit einer Füllung und keinen Pfad mit einem Strich, wenn Sie eine horizontale Linie haben? Alternativ können Sie userSpaceOnUse-Einheiten verwenden.

Answer 2

gradientUnits = "userSpaceOnUse" kann es beheben.

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