SVG 的平移、旋转和缩放

SVG中的平移、旋转和缩放在不同的参数条件下，体现出不同的效果:

1、如果直接用x、y指定了图形的坐标（在我的理解该坐标实际是图形相对坐标，如果没有通过transform属性设置坐标平移，该坐标是相对画布起始位置坐标，如果设置了坐标平移则为相对平移后坐标位置的偏移），所有的变形均受到x、y坐标值影响；如下代码示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800"><g  transform="translate(100,100)scale(0.8,0.8)">       <rect width="100" height="50" fill="blue"></rect></g><rect x="50" y="50" transform="translate(200,200)scale(1.2,1.2)" width="200" height="50" fill="red" />
</svg>

缩放倍数为1.2和1时实际看到的效果：受缩放的影响，矩形不仅长、宽跟随缩放系数变化，图形位置也跟随缩放系数变化，说明缩放系数要影响参数 x、y；相应的使用rotate参数时，也会受到x、y系数的影响。

建议：为保证图形变换效果，不要设置图形起始值，通过transform属性的translate参数设置图形相对坐标原点的平移位置即可；

2、旋转：如果采用transform属性设置了translate参数，则旋转中心为translate设置位置，示例如下：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800"><g  transform="translate(100,100)rotate(90)"><text fill="red">hello</text></g>
</svg>

当设置不同的旋转角度时，始终以坐标位置100,100为中心进行旋转，其中旋转按照rotate(angle,[x,y])格式设置参数，angle表示旋转的目标角度（不表示旋转角度哈，如：-90表示逆时针从0度位置逆时针方向选装90度，不是当前位置逆时针旋转90度），[x,y]表示旋转中心的相对坐标；如下示例代码：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800"><g  transform="translate(200,200)rotate(90)"><rect width="200" height="100" fill="red" ></rect></g>
</svg>

该示例代码的旋转中心为200,200,90度旋转完成后，矩形左上角坐标为（100，200），右上角坐标位置为(200,200)

如果设置translate（x1,y1）参数又设置了rotate的旋转中心参数，则实际的旋转中心为x1+x,y1+y,以下示例以矩形中心为中心点旋转的代码示例：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="800" height="800"><g  transform="translate(200,200)rotate(90,100 50)"><rect width="200" height="100" fill="red" ></rect></g>
</svg>

旋转中心位置为：300，250

SVG 的平移、旋转和缩放相关推荐

三维空间中的几何变换-平移旋转缩放
前言前段时间由于项目需要,深入学习了下图形几何变换,主要是绕任意轴旋转部分(其他的已有一定基础),现记录学习笔记. 文章内容部分引用并参考了下面的博客: http://netclass.csu.ed ...
Qt quick基础2（包含平移旋转放缩以及qml控件大写开头啊）
Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 目录 Qt quick基础2(包含平移旋转放缩以及qml控件大写开头啊) 前言简单的平移.旋转和放缩其他元素的一些基本使用 qm ...
偏移shaderuv_Unity Shader UV平移、旋转、缩放效果
平移.旋转.缩放.扭曲这几个效果在很多游戏场景中都会运用到,本篇文章就给大家分享下在Unity中基于Shader实现UV平移.旋转.缩放效果. 平移效果: 旋转: 缩放: 扭曲效果: shader代码 ...
mesh threejs 属性_threeJS创建mesh，创建平面，设置mesh的平移，旋转、缩放、自传、透明度、拉伸...
这个小案例是当初我在学习的时候,小的一个小案例,代码还需要进一步优化:还请谅解~~:主要用到了threeJS创建mesh,创建平面,设置mesh的平移,旋转.缩放.自传.透明度.拉伸等这些小功能: 采 ...
矩阵运算——平移，旋转，缩放
平时开发程序,免不了要对图像做各种变换处理.有的时候变换可能比较复杂,比如平移之后又旋转,旋转之后又平移,又缩放. 直接用公式计算,不但复杂,而且效率低下.这时可以借助变换矩阵和矩阵乘法,将多个变换合 ...
opencv 图像仿射变换计算仿射变换后对应特征点的新坐标图像旋转、缩放、平移...
常常需要最图像进行仿射变换,仿射变换后,我们可能需要将原来图像中的特征点坐标进行重新计算,获得原来图像中例如眼睛瞳孔坐标的新的位置,用于在新得到图像中继续利用瞳孔位置坐标. 仿射变换在:http:// ...
【J2me3D系列学习文章之三】（立即模式）对立方体进行变换操作-旋转、缩放、平移...
本文源地址:http://blog.csdn.net/xiaominghimi/archive/2010/12/09/6064367.aspx Himi 原创, 转载请注明! 谢谢. 上一篇文章 ...
三维坐标要建一个4*4的矩阵?平移旋转缩放
移植不知道三维物体的旋转平移缩放和矩阵的关系.找到这篇文章借鉴一下. 转自:https://blog.csdn.net/ALLENJIAO/article/details/80348362 怎么平移一 ...
Matlab图像的平移，旋转，缩放，裁剪
%%------------------------Matlab图像的平移,旋转,缩放,裁剪------------------------------- %-------------------头文 ...

SVG 的平移、旋转和缩放

SVG 的平移、旋转和缩放相关推荐

最新文章

热门文章