当我们对 SVG 应用矩阵变换时，圆的半径会发生什么变化？

Question

例如，假设我有这个圈子：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10" fill="green" />
</svg>

现在我得到了相同的圆和矩阵变换：

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <circle cx="10" cy="10" r="10" fill="red" transform="matrix(3 1 -1 3 30 40)" />
</svg>

为什么现在圈子变大了？

我正在阅读 this 但我不明白圆圈发生了什么。对于矩形，它似乎为它计算了 4 个新坐标。但是对于圆，它似乎计算了一个新的点，即新的圆心，然后圆的半径发生了一些变化，我不知道它是什么。

Answer 1

转换可以这样想（虽然这不是它们的实现方式）：

算出你要画的所有点
将第 1 步中的每个点映射到乘以矩阵得到的变换点
绘制所有那些变换的点

或者假设您在橡皮筋 sheet 上画了一个圆，然后均匀地拉伸 sheet。

当我们对 SVG 应用矩阵变换时，圆的半径会发生什么变化？

What happens to the radius of a circle on SVG when we apply a matrix transformation to it?

svg

transform