这篇文章给大家介绍的内容是关于在react中使用svg的各种方法总结（附代码），有一定的参考价值，有需要的朋友可以参考一下，希望对你有所帮助。

笛卡尔坐标系统转换

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

如下示例：

<svg width=200px height=200px viewbox=0 0 200 200 xmlns=http://www.w3.org/2000/svg>
 <g transform=translate(0, 100) scale(1, -1)>
    <line x1=0 y1=0 x2=100 y2=0 style=stroke: black />
    <line x1=0 y1=0 x2=0 y2=100 style=stroke: black />
    
    <polygin points=40 40, 100 40, 70 70, 40 70 style=fill: grey; stroke: black />
  </g>
<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 path路径的作用：svg path在网页开发中的使用方法

在react中使用svg的各种方法总结（附代码）

以上就是svg如何实现坐标系统变换（附代码）的详细内容，更多请关注双恒网络其它相关文章！