【发布时间】：2020-01-17 03:57:34
【问题描述】：
translate变换函数坐标的单位是什么？所以当我在做translate(100 100) 时，我是否将形状向右和底部移动了 100 像素？
【问题讨论】：
【发布时间】：2020-01-17 03:57:34
【问题描述】：
svg 中的单位
svg 中的单位是一个内部值。
有点complex 来解释，但我会尽量保持简短。
svg 中的所有值（除了例外）都是单位，它们在 viewBox 中使用。
viewBox 可以定义为 x 和 y 轴上的任意数字。
假设你有一个 100 x 100 的 viewBox。（写成 viewBox="0 0 100 100"）
单个单位将是映射到 100 x 100 空间的值。
所以如果你说：<rect width="10" height="10" /> 这将覆盖 x 轴和 y 轴上的 100 个单位中的 10 个单位。
为什么我们不能只使用像素大小？
所有基于矢量的图像都是制作的，因此您可以以任何您想要的尺寸显示它们。
当取决于其像素值时，具有不同大小的 svg 会以不同的方式显示。如果缩放，这将破坏任何 svg 图像。
这就是使用单位的原因，因此您的范围将始终显示相同的坐标，即使它已缩放。
【讨论】：
-
不也可以写
rect width="10px"吗？ -
@amirt 我相信是的，它们被翻译成单位。我会尽可能避免写 px 可能会让人困惑。
-
因此，如果我也有类似 svg 字体字形的
horiz-adv-x属性的东西，我可以通过将其值乘以 16 将其转换为像素，因为 1 em = 16 像素？ -
em = 元素的字体大小。使用相对尺寸时要小心。