Snap.svg对原生的svg进行了封装，为svg的创建、操作提供了便捷的方法，但是官网的文档对一些概念没有解释，难免会造成困扰。比如说路径的旋转，就存在变换后得不到路径交点的问题。

用普通的变换得不到路径的相交点

Snap.svg提供了：

Matrix.rotate(angle) 方法，将变换矩阵旋转一定角度。
和Matrix.toTransformString()方法，可以将变换矩阵转成变换字符串
Element.transform(transformString)方法，将变换应用到元素

变换矩阵涉及到图形学的内容，可参看3D计算机图形学（原书第三版，第一章。

很直接的，我们会想到用这三个函数来实现变换：

let myElem = Snap('.myElem');
let angle = 45 , matrix = new Snap.Matrix();
matrix.rotate(angle);   //变换矩阵旋转45度
myElem.transform(matrix);  //将变换应用到元素

这样确实是可以实现效果的，demo1。但是，这种变换不改变元素的定义，如果用在路径上，将造成路径的计算错误。比如一条路径：（0，0），（400，400），经过上面的变换后，其定义还是（0，0），（400，400），那么此时计算它和其它路径的相交点就会出错。

你可以打开demo1，然后打开console,运行：

Snap.path.intersection($lineA,$lineL2)

查看斜线和第二条平行线的交点，可以看到在拖动lineA过程中，相交点是不变的。

使用map将变换映射到路径

上面那种变换方法用在普通元素上是没问题的，但是用在路径上就会造成计算问题。其实，Snap.svg也提供了Snap.path.map(pathString,transformString)方法，这个方法可以将变换转成路径的定义，放回新的路径定义字符串。所以，我们可以这么用：

let myElem = Snap('.myElem');
let angle = 45 , matrix = new Snap.Matrix();
matrix.rotate(angle);   //变换矩阵旋转45度
let transformString = Snap.path.map($lineA,m);
$lineA.attr('d',transformString);

看demo2，再运行上面的测试，可以用到相交点是动态变化的。

另外，交点的值和路径的宽度是有关系，可以改变demo中路径的宽度试试。

Snap svg：路径变换和相交计算相关推荐

使用snap.svg实现svg路径描边动画
使用snap.svg实现svg路径描边动画一,snap.svg插件在近几天,突然接到一个需求,内容是要在网页上写一个路径的动画,还需要可以随意控制动画的速度,开始于结束,本来是一个图片可以解决的问 ...
android svg路径动画,五、Android SVG动画
SVG的全称是Scalable Vector Graphics(可缩放矢量图形),它不会因为图像放大而失真,且占用内存小,同时搭配Path动画,能够实现一些意想不到的效果. Android中的SVG图 ...
SVG路径描边动画效果的实现
SVG路径描边动画效果理解SVG坐标系和变换:视窗,viewBox和preserveAspectRatio部分参考自: http://www.w3cplus.com/html5/svg-coord ...
path弧形参数 svg_如何计算圆弧（圆弧）的SVG路径
您想使用椭圆Arc命令.不幸的是,这需要你指定起点和终点的笛卡尔坐标(x,y)而不是你拥有的极坐标(半径,角度),所以你必须做一些数学运算.这是一个应该工作的JavaScript函数(虽然我还没有测试 ...
纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 纯CSS实现帅气的SVG路径描边动画效果纯CSS实现帅气的SV ...
css图像描边,纯CSS实现帅气的SVG路径描边动画效果
一.应该人人皆会的基础技术简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 国外很多相关介绍的文章,来看看一些效果gif吧~ 我至少看到了4篇外文对此技术介绍(参见文末参考文章),觉得挺有意 ...
使用 Photoshop工具直接导出 svg路径
最近做某个小项目,项目中用到了很多 icon 图标,我一般都是习惯于直接引用各大图标库,例如 fontawesome.Ionicons.MaterialCommunityIcons等. 由于最近也在关 ...
SVG路径描边动画效果
一.效果简而言之,就是让SVG的描边像是有人绘制一样的动画效果. 三.必知的基础知识 SVG中有个比较重要的属性分支,stroke :"描边". 1,stroke 描边颜色 no ...
【运筹学】线性规划人工变量法 ( 人工变量法案例 | 第三次迭代 | 中心元变换 | 检验数计算 | 最优解判定 )
文章目录一.第三次迭代 : 中心元变换二.第三次迭代 : 单纯形表三.第三次迭代 : 检验数计算四.第三次迭代 : 最优解判定五.第三次迭代 : 最终单纯形表上一篇博客 [运筹学]线性规划 ...

Snap svg：路径变换和相交计算

用普通的变换得不到路径的相交点

使用map将变换映射到路径

Snap svg：路径变换和相交计算相关推荐

最新文章

热门文章