完全な水平パスのSVGグラデーション

Question

私はsvgを使って折れ線グラフを描き、グラデーションを適用する必要があります。各行について、パス要素を使用して、ストロークを私のlineargradient要素の1つに設定します。

これは純粋に水平な線以外のすべてに効果があります。この場合、私の線には全く色がつきません。

私はこの問題を示すバイオリンを作った：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>​ 

純粋水平線（第1パス）が表示されず、2つ目（Yのわずかな変化）がありません。

偽のM-1を最初に置いて、IEとChromeの問題を回避するように思われますが、Firefoxでは問題にならないように少しハックしました。これは、私がSVGのグラデーションとパスを理解する上で何かが欠けていると思うようになります。これを動作させる方法はありますか？

Answer 1

gradientUnitsのデフォルトはobjectBoundingBoxです。あなたが持っている重要な問題は、specification textの最後の段落で説明されています。水平線がある場合は、ストロークのあるパスではなく塗りつぶしを使用してください。または、代わりにuserSpaceOnUseユニットを使用します。

Answer 2

gradientUnits = "userSpaceOnUse"はそれを修正できます。

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