理解SVG transform坐标变换
这篇讲的是HTML的CSS3 transform和SVG自带transform属性之间的差异，作者用了一个很生动的比喻——“谢霆锋和陈冠希的关系”——来说明两者既相似又复杂的联系。 核心差异在于坐标系统。HTML的transform默认相对于元素自身的中心点变换，而SVG的transform默认基于整个画布的左上角（0,0点）进行。这导致了旋转效果上巨大的不同：一个元素在HTML中可能围绕自身中心优雅地旋转，在SVG中却可能像坐过山车一样绕着画布原点大幅摆动。 作者也指出了SVG transform的一个关键优势：它的`rotate()`函数支持可选的[x, y]参数，允许我们手动指定旋转中心点。这完美解决了SVG坐标系带来的问题，让元素能像HTML中一样围绕自身中心旋转，同时避免了依赖可能在IE中不被支持的CSS `transform-origin`属性。此外，文章还澄清了语法细节，比如SVG transform的值不能带单位。 理解这些差异对于在网页中同时使用HTML和SVG图形至关重要，能帮助开发者精准控制元素的变换行为，避免不必要的渲染困惑。
