SVG 条形图倒置不旋转

Question

我有一个像这样的 svg 矩形图：

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

SVG 条形图倒置不旋转

SVG bars graph upside down without rotation

css

svg

rect