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/Positions#The_grid]。

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

自适应代码段：

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

如何使垂直svg垂直高度从底部开始？

1 个答案: