Gradient SVG dla idealnie poziomej ścieżki

Question

Używam svg do rysowania wykresów liniowych i wymaga zastosowania gradientu. Dla każdej linii używam elementu ścieżki i ustawię obrys na jeden z moich elementów liniowych.

Działa to doskonale na wszystko, ale linie czysto poziome - w tym przypadku nie dostaję żadnych kolorów na mojej linii.

Zrobiłem skrzypce pokazujący problem: 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>​ 

Czysta linia pozioma (pierwsza ścieżka) nie pojawi się, a druga (niewielka zmiana w y) robi.

Próbowałem trochę hackować, żeby zacząć - kładąc fałszywy M-1, -1 na starcie, co wydaje się działać w całym IE i Chrome, ale nie w Firefoksie. To sprawia, że ​​myślę, że brakuje mi jakiegoś zrozumienia gradientów i ścieżek SVG. Czy istnieje sposób, aby to zadziałało?

Answer 1

Domyślną wartością dla gradientUnits jest objectBoundingBox. Kluczową kwestią jest opisana w ostatnim akapicie specification text. Dlaczego nie użyć prostokąta z wypełnieniem zamiast ścieżki z obrysem, jeśli masz poziomą linię? Lub alternatywnie użyj jednostek userSpaceOnUse.

Answer 2

gradientUnits = "userSpaceOnUse" może to naprawić.

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