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如何实现坐标系统变换(附代码)的详细内容,更多请关注jquery中文网其它相关文章!
-->您可能感兴趣的文章:
svg如何实现坐标系统变换(附代码)
SVG画图功能:svg实现画出一朵花(附代码)
svg标签:<text >标签和<tspan>标签的应用(代码)
svg中<marker>元素的使用及marker属性的介绍
svg path路径的作用:svg path在网页开发中的使用方法
关于使用HTML5进行SVG矢量图形绘制的代码
HTML5如何使用SVG(代码示例)
如何用SVG制作酷炫动态图标?(代码实例)
SVG是什么
在react中使用svg的各种方法总结(附代码)