SVG转换转换功能的单位

Question

translate变换函数坐标的单位是什么？因此，当我做translate(100 100)时，是在将形状向右下方移动100个像素吗？

Answer 1

svg中的单位

SVG中的

单位是内部值。

有点complex的解释，但我会尽量简短。

svg中的所有值（例外）都是单位，它们在viewBox中使用。
可以在x和y轴上使用任意数字定义viewBox。

因此，假设您有一个100 x 100的viewBox。（写为viewBox =“ 0 0 100 100”）
一个单位将是一个映射到100 x 100空间的值。

因此，如果您说：<rect width="10" height="10" />，它将在x和y轴上覆盖10个单位（每100个单位）。

为什么我们不能只使用像素大小？

所有基于矢量的图像均已制作，因此您可以根据需要显示任意大小。
当大小不同的svg取决于其像素值时，其显示方式也会有所不同。如果缩放，这将破坏任何svg图像。

这就是为什么使用单位的原因，因此您拥有一个范围，即使缩放比例也始终显示相同的坐标。