css - svg - 颠倒前。图形

Question

我正在尝试制作一个简单的 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>

Answer 1

您需要记住的是，rotate()变换将围绕坐标 (0,0) 旋转对象，在这种情况下，坐标是图形的左上角。由于图形是 300p 宽和 300px 高，旋转 180° 会导致图形脱离左上角。可以使用translate变换来重新调整坐标，以便绘图再次出现在视图框中。希望这个插图能解释：

这是一个更新的 JSfiddle，还有一些其他修复：http: //jsfiddle.net/rhvP8/4/

Answer 2

squeamish 解决方案的替代方案是使用也采用旋转原点的旋转版本：rotate(angle x y).

由于您知道您的图表是 300x300，因此使用rotate(180 150 150)效果很好。

演示在这里

Answer 3

简单的方法： scaleY() CSS 函数，定义了一个沿 y 轴（垂直）调整元素大小的转换。

svg {
  transform: scaleY(-1);
}

在此处查看浏览器兼容性：https ://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/scaleY()#browser_compatibility