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：路径变换和相交计算的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。