1

私はSVGとして棒グラフを作成していますが、棒をアニメーション化して、y軸の「0」から対応する値まで上向きに成長させたいと考えています。

私を苦労させているのは、座標（0,0）が左下ではなく左上にあることです。私の「アニメーション化されていない」ソリューションでは、次のように、バーの高さに応じて「y」の値をバーに与えていました。

<svg id="graph" 
        xmlns="http://www.w3.org/2000/svg" 
        xlink="http://www.w3.org/1999/xlink">
    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>
    <rect width="50" height="14" x="0" y="8" fill="url(#gradient)"></rect>
    <rect width="50" height="22" x="55" y="0" fill="url(#gradient)"></rect>
    <rect width="50" height="15" x="110" y="7" fill="url(#gradient)"></rect>
    <rect width="50" height="9" x="165" y="13" fill="url(#gradient)"></rect>
</svg>

（y +高さ）はすべての長方形で同じであるため、これは棒グラフのように見えますが、概念的には、y軸のさまざまなポイントから始まり、同じyの値まで下に向かって「上から下」に描画されます。

これをアニメートしたいときは、明らかに「上向き」に成長させたいのですが、これが行き詰まっています。

<rect width="50" height="14" x="0" y="8" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="14" dur="2s" id="animation"></animate>    
</rect>

これにより、長方形がy=8からy=22に「下」に成長し、（0,0）が左上にあるグリッド内で完全に意味があります。ただし、実際には反対のことをしたかったのですが、「height」属性の負の値は0として扱われるように見えるため（または、高さを-14から0にアニメーション化できた可能性があります）、どうすればよいかわかりません。

私はグーグルを試しましたが、あまり運がありませんでした。また、チャートライブラリを使用せずにこれを実行したいと思います。

4

3 に答える 3

6

すべてを scale(1, -1) 変換でラップすると、すべての y 値が -1 で乗算され、y 軸が反転する効果があります。次に、正の値を持ち、表示できるように、すべてを下に翻訳する必要があります。

<g transform="translate(0, 40) scale(1, -1)">    
  <rect width="50" height="14" x="0" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="14" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="55" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="22" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="110" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="15" dur="2s" fill="freeze"></animate>    
  </rect>
  <rect width="50" height="14" x="165" y="0" fill="url(#gradient)">
    <animate attributeName="height" from="0" to="9" dur="2s" fill="freeze"></animate>
  </rect>
</g>

すべての y 値を等しく設定する必要があり、グラデーションを反転したい場合があることに注意してください。

于 2012-08-06T11:17:37.787 に答える
0

軸を反転させない代替ソリューション:

<svg id="graph" 
        xmlns="http://www.w3.org/2000/svg" 
        xlink="http://www.w3.org/1999/xlink"> 
    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>
    <rect width="50" height="9" x="0" y="9" fill="url(#gradient)"></rect>
    <rect fill="white" opacity="1" x="-1" y="8" width="52">
        <animate attributeName="height" to="0" from="10" dur="2s" id="curtain"></animate>
    </rect>

    ...

</svg>

実線のバーを描画し、その上に白い非透明の長方形を追加し、その長方形にアニメーションを設定すると、バーが上向きに伸びているように見えます。

さまざまなラベルとテキストオーバーレイも追加する必要があるため、このソリューションに行き着きました（ただし、関連性があるとは思わなかったので、その部分は問題から除外しました）。scale(1 -1) で svg を反転すると、テキストが上下逆さまに表示され、バーが含まれる svg の部分だけを反転すると、コードを作成していた 2 つの異なる座標セットを操作する必要があります (これは静的 XML ではなく、生成されたグラフ) は少し面倒です。

于 2012-08-06T23:24:50.610 に答える
-1

私はあなたのコードをいじって、いくつか変更しました。次のことについてどう思いますか。

<svg id="graph" 
    xmlns="http://www.w3.org/2000/svg" 
    xlink="http://www.w3.org/1999/xlink">

    <linearGradient x1="0%" x2="0%" y1="10%" y2="100%" id="gradient">
        <stop style="stop-color:#0000FF" offset="0"></stop>
        <stop style="stop-color:#FFFFFF" offset="1"></stop>
    </linearGradient>

    <rect width="50" height="14" x="0" y="8" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation1"></animate>    
    </rect>

    <rect width="50" height="22" x="55" y="0" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation2"></animate>    
    </rect>

    <rect width="50" height="15" x="110" y="7" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation3"></animate>    
    </rect>

    <rect width="50" height="9" x="165" y="13" xfill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation"></animate>    
    </rect>

    <rect width="50" height="14" x="0" y="8" fill="url(#gradient)">
        <animate attributeName="height" from="0" to="14" dur="2s" id="animation4"></animate>    
    </rect>
</svg>

ではごきげんよう

于 2012-08-05T09:15:34.497 に答える