javascript - CSS Transform over SVG 的 getComputedStyle 结果不正确

Question

我在制作 CSS 动画时使用 getComputedStyle 从一些 SVG 元素获取 css 转换值。例如，

<svg width="100px" height="100px">
  <circle cx="50" cy="50" r="10" style="transform:translate(50%,50%)"/>
</svg>
<script>
  var ret = window.getComputedStyle(circle).transform;
  /* ret = matrix(1,0,0,1,0,0) in chrome */
  /* ret = matrix(1,0,0,1,50,50) in firefox */
</script>

但是我在 ret 中得到了“matrix(1,0,0,1,0,0)”(单位矩阵)，它忽略了我设置的样式翻译(50%,50%)。

如果我使用像素作为单位，那么它可以正常工作:

<svg width="100px" height="100px">
  <circle cx="50" cy="50" r="10" style="transform:translate(10px,10px)"/>
</svg>
<script>
  var ret = window.getComputedStyle(circle).transform;
  /* ret = matrix(1,0,0,1,10,10) in both chrome and firefox */
</script>

由于这里的百分比应该与元素的维度相关，所以 getComputedStyle 的结果应该与 matrix(1,0,0,1,10,10) 具有相同的结果。

不确定这是浏览器中的错误还是什么，但是 - 现在有没有办法至少在 Chrome 和 Firefox 中获得正确和一致的值？

Answer 1

你能用你的元素试试吗.getBoundingClientRect().transform .有时 window.getComputedStyle 会针对不同的浏览器返回不同的值。