svg实现坐标系统变换的方法

这篇文章将为大家详细讲解有关svg实现坐标系统变换的方法，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。

10年积累的成都做网站、网站设计经验，可以快速应对客户对网站的新想法和需求。提供各种问题对应的解决方案。让选择我们的客户得到更好、更有力的网络服务。我虽然不认识你，你也不认识我。但先建设网站后付款的网站建设流程，更有成武免费网站建设让你可以放心的选择与我们合作。

笛卡尔坐标系统转换

如果总其他系统传输数据到SVG, 可能必须处理使用笛卡尔坐标表示数据的矢量图形。点(0, 0)位于画布的左下角，y坐标向上递增。y轴与SVG的默认约定"上下相反"，因此需要重新计算坐标。

如下示例：

SVG变换

translate(x, y): 按照指定的x和y值移动用户坐标系统
scale(xFactor, yFactor): 使用指定的xFactor和yFactor乘以所有的用户坐标系统。比例值可以是小数或者负值
scale(factor): 和scale(xFactor, yFactor)相同
rotate(angle): 按照指定的angle旋转用户坐标。旋转中心为原点(0, 0)。在默认坐标系统中，旋转角度按顺时针方向递增，水平线的角度为0度
rotate(angle, centerX, centerY): 按照指定的angel旋转用户坐标。旋转中心由centerX和centerY指定
skewX(angle): 根据指定的angle倾斜所有x坐标。从视觉上讲，这会让垂直线出现角度
skewY(angle): 根据指定的angle倾斜所有y坐标。从视觉上讲，这会让水平线出现角度

关于svg实现坐标系统变换的方法就分享到这里了，希望以上内容可以对大家有一定的帮助，可以学到更多知识。如果觉得文章不错，可以把它分享出去让更多的人看到。