SVG内使用vh单位的transform表现异常问题咨询

先给核心结论：这是因为SVG内部元素的transform（哪怕通过style设置）遵循SVG自身的单位解析规则，和普通HTML元素的CSS transform逻辑完全不同。

为什么会出现“异常”表现 #

你预期里vh是直接对应视口高度的比例，但SVG里的transform会把vh转成像素后，再映射到SVG的viewBox坐标系中：

1. 第一步，10vh先计算为对应视口高度的像素值——比如窗口高度1000px，那就是100px。
2. 第二步，这个像素值要转换成SVG的“用户单位”：你的SVG高度是100vh（也就是1000px），viewBox设为0 0 100 100，所以1个用户单位等于10px（1000px ÷ 100）。
3. 最终位移量就是100px ÷ 10px/单位 = 10个用户单位，也就是viewBox高度的10%。

说白了，不管窗口高度怎么变，最终位移的都是viewBox的10%，看起来就像和窗口高度无关，但本质是计算过程中窗口高度的变量被抵消了——这就是你觉得“异常”的根源。

100vh的参考基准 #

这里的vh参考的还是浏览器视口高度，规则没毛病，只是后续的单位转换让最终效果和viewBox绑定，没有直接体现视口比例而已。

你的代码验证 #

拿你提供的代码举例：

body {
  margin: 0;
}
svg {
  background: red;
  height: 100vh;
}

<main>
<svg viewBox="0 0 100 100">
<circle cx="50" cy="50" r="50" style="transform: translateY(10vh)"/>
</svg>
</main>

当窗口高度为1000px时，圆形会从cy=50（对应500px）移动到cy=60（对应600px），确实是视口高度的60%，逻辑上是正确的，但因为和viewBox绑定，你可能误以为它没跟着视口变化。

达到预期效果的解决办法 #

如果想让位移直接对应视口高度的10%，可以选这两种方式：

• 用CSS transform加transform-box：给circle添加样式，让它遵循CSS的单位解析规则：

  circle {
    transform: translateY(10vh);
    transform-box: fill-box;
  }
  

• 直接用SVG用户单位：既然SVG高度是100vh，viewBox的10单位就等价于10vh，直接写transform="translate(0,10)"更简洁。

内容的提问来源于stack exchange，提问作者fweth