Snap.svg对原生的svg进行了封装,为svg的创建、操作提供了便捷的方法,但是官网的文档对一些概念没有解释,难免会造成困扰。比如说路径的旋转,就存在变换后得不到路径交点的问题。
用普通的变换得不到路径的相交点
Snap.svg提供了:
Matrix.rotate(angle)
方法,将变换矩阵旋转一定角度。- 和
Matrix.toTransformString()
方法,可以将变换矩阵转成变换字符串 Element.transform(transformString)
方法,将变换应用到元素
变换矩阵涉及到图形学的内容,可参看3D计算机图形学(原书第三版 ,第一章。
很直接的,我们会想到用这三个函数来实现变换:
let myElem = Snap('.myElem');
let angle = 45 , matrix = new Sn