SVG.js：通過變形（）方法生成動畫矩陣

我想使用SVG.js動畫變換矩陣。有一種方法， matrix.morph（），這是打算做到這一點。我無法做到這一點。SVG.js：通過變形（）方法生成動畫矩陣

下面是一個試圖應用此方法的示例，但它什麼都不做。有人可以告訴我如何使用SVG.js動畫變換矩陣。謝謝。

<!DOCTYPE html> 
 
<html xmlns="http://www.w3.org/1999/xhtml"> 
 
<head> 
 
    <title>SVG.js - Rect Animate Matrix Morph</title> 
 
    <script type="text/javascript" src="//svgDiscovery.com/SVG.js/svg.js"></script> 
 
    <meta http-equiv="content-type" content="text/html; charset=UTF-8"> 
 
    <meta name="viewport" content="width=device-width"> 
 
</head> 
 
<body style='padding:10px;font-family:arial;'> 
 
<center> 
 
<h4>SVG.js - Rect Animate Animate Matrix Morph</h4> 
 
<table> 
 
<tr> 
 
<td> 
 
<div id="svgDiv" style='background-color:lightgreen;width:400px;height:400px;'></div> 
 
</td> 
 
</tr></table> 
 
<script> 
 
    var mySVG = SVG('svgDiv').size(400, 400); 
 
    var myRect = mySVG.rect(100,100).attr({x:150,y:150,id:'myRect',fill: '#f00','stroke-width':3,stroke:'black'}); 
 
    var myRectMatrix = new SVG.Matrix 
 
    var myRectMatrixMorph=myRectMatrix.morph(1,2,3,4,5,6) 
 
    console.log(myRectMatrixMorph.toString()) 
 

 
</script> 
 
</body> 
 
</html>

來源

2017-05-13 Francis Hemsher

要動畫你做同樣的方式設置元素的轉換元素的轉型 - 與transform()方法。動畫時，您不需要親自觸摸變形方法。

嘗試：

el.animate().transform({rotation:25}) 
// or with matrix 
el.animate().transform({a:1, b:0, c:0 .... }) 
// or with SVG.Matrix 
el.animate().transform(new SVG.Matrix(1,0,0 ....))

的變形方法是隻爲你想在某個位置的基質的情況下。像：

var m1 = new SVG.Matrix(1,0,0,1,0,0) 
var m2 = new SVG.Matrix(2,0,0,2,0,0) 
m1.morph(m2) 
m1.at(0.5) // returns matrix (1.5,0,0,1.5,0,0)

來源

2017-05-19 15:08:15 Fuzzyma

SVG.js：通過變形（）方法生成動畫矩陣

回答

相關問題