SVGバーは、私のようなSVG四角形チャート持って回転

Question

ずに逆さまグラフ：私は何をしたいか

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

を上下逆さまにそれを表示することです。 コードと指定された解決策は、から来ていますhttp://jsfiddle.net/rhvP8/5/

しかし、私は同じXの場所に各バーを保ちたいと思います。したがって、回転アプローチはこの場合には有効ではありません。

助けを歓迎します。

Answer 1

の回転x軸のみが必要なようです。

svg { 
 
    border: 1px solid green; 
 
    transform: rotateX(180deg); 
 
}

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