0

棒グラフの作成という単純な svg の例を作成しようとしています。しかし、私はそれがどのように機能するかを明確に理解していません。既存のグラフを上下逆に回転させましたが、少しずれているようです。対応する jsfiddle はこちら - http://jsfiddle.net/rhvP8/2/ 

  <div style="width:300px;height:300px;">
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
    <g>
        <rect  width="14.55" height="40%" x="0" y="0" fill="black"></rect>
        <rect  width="14.55" height="20%" x="50" y="0" fill="green"></rect>
        <rect  width="14.55" height="80%" x="100" y="0" fill="red"></rect>
        <rect  width="14.55" height="90%" x="150" y="0" fill="yellow"></rect>
        <rect  width="14.55" height="10%" x="200" y="0" fill="pink"></rect>
        <rect  width="14.55" height="60%" x="250" y="0" fill="orange"></rect>
    </g>
</svg> 
</div>
<div style="width:300px;height:300px;">
 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="width:100%;height:100%" viewBox="0 0 300 300">
    <g transform="rotate(180)">
        <rect  width="14.55" height="40" x="-50" y="-300" fill="black"></rect>
        <rect  width="14.55" height="20" x="-100" y="-300" fill="green"></rect>
        <rect  width="14.55" height="35" x="-150" y="-300" fill="red"></rect>
        <rect  width="14.55" height="90" x="-200" y="-300" fill="yellow"></rect>
        <rect  width="14.55" height="10" x="-250" y="-300" fill="pink"></rect>
        <rect  width="14.55" height="60" x="-300" y="-300" fill="orange"></rect>
    </g>
    </svg> 
</div>
4

3 に答える 3

1

squeamish の解決策に代わる方法は、回転の原点も取るバージョンの回転を使用することです: rotate(angle x y).

グラフが 300x300 であることはわかっているので、使用してもrotate(180 150 150)問題ありません。

デモはこちら

于 2013-11-08T23:08:28.347 に答える
1

覚えておく必要があるのは、rotate()変換が座標 (0,0) を中心にオブジェクトを回転させることです。この場合は、グラフの左上隅です。グラフは幅 300p、高さ 300px であるため、180 度回転すると、グラフが左上隅を超えてスピンオフします。translate変換を使用して座標を再調整し、図面がビューボックス内に再び表示されるようにすることができます。この図で説明できることを願っています。

SVG での回転変換と平行移動変換の図

これは、他のいくつかの修正を含む更新された JSfiddle です: http://jsfiddle.net/rhvP8/4/

于 2013-11-08T22:43:05.037 に答える
0

簡単な方法: CSS 関数scaleY()は、y 軸 (垂直方向) に沿って要素のサイズを変更する変換を定義します。

svg {
  transform: scaleY(-1);
}

ブラウザーの互換性については、こちらをご覧ください: https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY()#browser_compatibility

于 2021-06-20T14:46:35.080 に答える