SVG.js：通过 morph() 方法动画矩阵答案

【问题标题】：SVG.js: Animate matrix via morph() methodSVG.js：通过 morph() 方法动画矩阵
【发布时间】：2017-05-13 14:50:42
【问题描述】：

我想使用 SVG.js 为变换矩阵制作动画。列出了一种方法， matrix.morph()，就是为了做到这一点。我做不到。

下面是一个尝试应用此方法的示例，但它不执行任何操作。有人可以告诉我如何使用 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>

【问题讨论】：

标签： javascript svg svg.js

【解决方案1】：

要对元素的变换进行动画处理，您的操作方式与在元素上设置变换相同 - 使用 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 ....))

morph 方法仅适用于您希望矩阵位于特定位置的情况。喜欢：

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)

【讨论】：