SVG 元素上的 css 变换 - 数学是什么？答案

【问题标题】：css Transforms on SVG elements - what's the math?SVG 元素上的 css 变换 - 数学是什么？
【发布时间】：2017-10-25 17:10:26
【问题描述】：

当您在 svg 元素上执行 transform: translateX(50px) 之类的操作时，例如 <rect> 或其他东西，50px 是缩放到 svg 单位还是屏幕上的 50 个像素？

【问题讨论】：

标签： html css svg

【解决方案1】：

Welp，我猜我有我的答案

https://jsfiddle.net/oegmc7xt/

html:

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" width="200px">
  <rect fill="#444444" width="200" height="200"></rect>
  <rect fill="#abcdef" width="100" height="100" class="move"></rect>
</svg>


<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve" width="100px">
  <rect fill="#444444" width="200" height="200"></rect>
  <rect fill="#abcdef" width="100" height="100" class="move"></rect>
</svg>

css：

.move {
  transform: translateX(50px)
}

似乎“50px”正在缩放到 50 个 svg 单位

【讨论】：

更重要的是，它位于userspace coordinates。这意味着，如果在 svg 中嵌套了多个变换，或者使用 viewBox 属性建立了新视口，则单位会以元素相对于下一个变换坐标系的父元素的坐标表示。