代码之家 › 专栏 › 技术社区 › user1063287

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

svg

user1063287 · 技术社区 · 7 年前

期望的行为

实际行为

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

1 回复 | 直到 7 年前

Mehdi 7 年前

SVG的Y轴从上到下(源代码)[ https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Positions#The_grid] .

改编片段:

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