14

svgを使用して折れ線グラフを描画していますが、グラデーションを適用する必要があります。各行について、パス要素を使用し、ストロークを線形グラデーション要素の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>​

純粋な水平線（最初のパス）は表示されず、2番目の線（yのわずかな変化）が表示されます。

私はそれを実行するために少しハックを試みました-最初に偽のM-1、-1を置きます。これは、IEとChromeの問題を回避しているようですが、Firefoxでは回避できません。これにより、SVGのグラデーションとパスの理解に何かが欠けていると思います。これを機能させる方法はありますか？

4

2 に答える 2

16

gradientUnitsのデフォルトはobjectBoundingBoxです。あなたが抱えている重要な問題は、仕様書の最後の段落で説明されています...

キーワードobjectBoundingBoxは、水平線または垂直線の場合のように、該当する要素のジオメトリに幅または高さがない場合は使用しないでください。ストローク幅がゼロ以外であるために線を表示したときに実際の太さがあります。ストローク幅は、境界ボックスの計算では無視されます。該当する要素のジオメトリに幅や高さがなく、objectBoundingBoxが指定されている場合、指定された効果（グラデーションやフィルターなど）は無視されます。

水平線がある場合は、ストロークのあるパスではなく、塗りつぶしのある長方形を使用してみませんか？または、userSpaceOnUseユニットを使用することもできます。

于 2012-11-04T22:52:29.353 に答える
10

gradientUnits="userSpaceOnUse"で修正できます。

デモ

<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>

より詳細な回答

于 2015-01-29T09:51:16.533 に答える