【发布时间】：2020-10-26 15:56:04
【问题描述】：
例如，假设我有这个圈子：
<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 个新坐标。但是对于圆，它似乎计算了一个新点，即圆的新中心，然后圆的半径发生了一些我不知道它是什么的事情。
【问题讨论】：
-
很好，这对做我想做的事很有用，但我仍然不明白为什么圆圈会缩放。比如在这支笔上，我计算完矩阵后在每个点上放了一个圆圈，但是与圆圈所在的位置不匹配：codepen.io/matheussilvasantos/pen/GRqWBKv?editors=1000。
-
因为 3 > 1 所以它变大了。
-
它是如何变大的？它会改变圆的笛卡尔点吗？圆只有一个在中心的点，改变什么来缩放圆？
-
是的，没错。我已经在 CodePen 上更新了我的示例，现在我可以看到：codepen.io/matheussilvasantos/pen/GRqWBKv。为此考虑了圆周围的四个点。谢谢！