svg的transform-matrix详解

写在最先：如果你发现百度几个小时都还没能解决问题的话，为什么不翻墙上个google呢？

以及，下图这种不负责任的错误答案居然还有那么多人转。。。

一、svg transform的种类

translate（平移）
skew（倾斜）
rotate（旋转）
scale（缩放）
matrix（矩阵操作，可涵盖前四者，威力十分强大）

二、用matrix表达前三者

matrix接口样式：matrix(a,b,c,d,e,f)

对应矩阵：

a  c  e
b d f 0 0 1

1.Translate(tx, ty)

矩阵：

1  0  tx
0 1 ty 0 0 1

写法：matrix(1,0,0,1,tx,ty)

2.Scale(sx, sy)

矩阵：

sx  0  0 0 sy 0 0 0 1

写法：matrix(sx,0,0,sy,0,0)

3.Rotate(a)

矩阵：

cos(a) -sin(a) 0 sin(a) cos(a) 0 0 0 1

写法：matrix(cos(a), sin(a), -sin(a), cos(a), 0, 0)

3+.Rotate(a, cx, cy)

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy 0 0 1

写法：matrix(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty)

4.skew(skewX, skewY)

4.1 skewX

矩阵：

1 tan(a) 0 0 1 0 0 0 1

写法：matrix(1, 0, tan(a), 1, 0, 0)

4.2 skewY

矩阵：

1 0 0 tan(a) 1 0 0 0 1

写法：matrix(1, tan(a), 0, 1, 0, 0)

5.如果你的使用包含旋转，缩放，平移等多种

例如：

<g transform="translate(20, 50) scale(1, 1) rotate(-30 10 25)">

对应矩阵：

cos(a) -sin(a) -cx × cos(a) + cy × sin(a) + cx + tx sin(a) cos(a) -cx × sin(a) - cy × cos(a) + cy + ty 0 0 1

写法：matrix(cos(a), sin(a), -sin(a), cos(a), -cx × cos(a) + cy × sin(a) + cx + tx, -cx × sin(a) - cy × cos(a) + cy + ty)

以上式为例: matrix(0.866, -0.5 0.5 0.866 8.84 58.35).

此处scale为1，因此不考虑。如果scale不为一（scale (sx, sy)），则：

matrix (sx × cos(a), sy × sin(a), -sx × sin(a), sy × cos(a), (-cx × cos(a) + cy × sin(a) + cx) × sx + tx, (-cx × sin(a) - cy × cos(a) + cy) × sy + ty)

最后，在js中的格式为：

svgItem.setAttribute('transform', `matrix(${sx * Math.cos(a)},${sy * Math.sin(a)},${-sx * Math.sin(-a)},${sy * Math.cos(a)},${(-cx * Math.cos(a) + cy * Math.sin(a) + cx) * sx + Math.floor(tx)},${(-cx * Math.sin(a) - cy * Math.cos(a) + cy) * sy + Math.floor(ty)})`
);

—— 完 ——

(-cx * Math.cos(a) + cy * Math.sin(a) + cx) * sx + Math.floor(tx)

转载于:https://www.cnblogs.com/bbcfive/p/11155824.html

svg的transform-matrix详解相关推荐

超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文摘自超级强大的SVG SMIL animation动画详解_Zoomla!逐浪CMS官网 (z01.com),网站看上去有年头了,担心哪天会 ...
[转]超级强大的SVG SMIL animation动画详解
超级强大的SVG SMIL animation动画详解本文花费精力惊人,具有先驱前瞻性,转载规则以及申明见文末,当心予以追究. 本文地址:http://www.zhangxinxu.com/word ...
EMD算法之Hilbert-Huang Transform原理详解和案例分析
目录 Hilbert-Huang Transform 希尔伯特-黄变换 Section I 人物简介 Section II Hilbert-Huang的应用领域 Section III Hilbert ...
SVG矢量绘图 path路径详解（贝塞尔曲线及平滑）
维基百科:贝塞尔曲线以二次贝塞尔曲线的公式为例: js函数: //p0.p1.p2三个点,其中p0为起点,p2为终点,p1为控制点 //它们的坐标用数组表示[x,y] //t的范围是0-1 func ...
SVG矢量绘图 path路径详解（基本画法）
SVG的形状标签里,path是最强大的一个,掌握了path就足够处理常见的绘图问题了. 先看一下path标签的基本用法: <path d="M100,100 L200,200 L200 ...
【5年Android从零复盘系列之二十】Android自定义View(15)：Matrix详解(图文)【转载】
[转载]本文转载自麻花儿wt 的文章<android matrix 最全方法详解与进阶(完整篇)> [5年Android从零复盘系列之二十]Android自定义View(15):Matri ...
Eigen Matrix 详解
Eigen Matrix 详解在Eigen中,所有的matrices 和vectors 都是模板类Matrix 的对象,Vectors 只是一种特殊的矩阵,行或者列为1. Matrix的前三个模板参 ...
SVG SMIL animation动画详解
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...
【CG】针孔相机矩阵(Camera Matrix)详解
0. 相机矩阵 Camera Matrix 小孔成像模型成像过程 1. 相机矩阵的分解齐次坐标下,物体的物理坐标是 [x,y,z,1]′ [ x , y , z , 1 ] ′ [x,y,z,1] ...
SVG SMIL animation动画详解----转载
一.SVG SMIL animation概览 1. SMIL是什么? SMIL不是指「水蜜梨」,而是Synchronized Multimedia Integration Language(同步多媒体 ...

svg的transform-matrix详解

svg的transform-matrix详解相关推荐

最新文章

热门文章