我有一个svg rect图表,如:
<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位置。因此,在这种情况下,轮换方法并不那么有用。
欢迎任何帮助。
答案 0 :(得分:1)
x轴仅的旋转似乎是您所需要的。
this.dataService.data$.emit(someData);
&#13;
svg {
border: 1px solid green;
transform: rotateX(180deg);
}
&#13;