如何让垂直svg矩形高度从底部开始?

Question

期望的行为

制作带有垂直条的"条形图"样式图标。

实际行为

下面显示如果我用scaleY()翻转它时所需的结果。

/* uncomment below for desired appearance */
/*
svg {
transform: scaleY(-1);
}
*/

<svg style="background: yellow" width="20" height="20" viewbox="0 0 20 20">
<rect x="2" y="0" width="1" height="5" style="fill:rgb(0,0,0)"/>
<rect x="7" y="0" width="1" height="8" style="fill:rgb(0,0,0)"/>
<rect x="12" y="0" width="1" height="15" style="fill:rgb(0,0,0)"/>
<rect x="17" y="0" width="1" height="10" style="fill:rgb(0,0,0)"/>
Sorry, your browser does not support inline SVG.  
</svg>

问题

从底部而不是顶部开始height的正确方法是什么？

Answer 1

SVG 的 Y 轴从上到下(来源([https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Position#The_grid]。

为了从图标底部显示条形，您需要相应地计算每个条形的 y 坐标：图标高度 - 条形高度。

改编片段：

/* uncomment below for desired appearance */
/*
svg {
transform: scaleY(-1);
}
*/

<svg style="background: yellow" width="20" height="20" viewbox="0 0 20 20">
<rect x="2" y="15" width="1" height="5" style="fill:rgb(0,0,0)"/>
<rect x="7" y="12" width="1" height="8" style="fill:rgb(0,0,0)"/>
<rect x="12" y="5" width="1" height="15" style="fill:rgb(0,0,0)"/>
<rect x="17" y="10" width="1" height="10" style="fill:rgb(0,0,0)"/>
Sorry, your browser does not support inline SVG.  
</svg>