SVG.js:通过morph()方法的动画矩阵
SVG.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>
回答 1
Stack Overflow用户
发布于 2017-05-19 15:08:15
要对元素的转换进行动画化，您可以使用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)页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/43954493
复制相关文章
相似问题
腾讯云开发者
Copyright © 2013 - 2026 Tencent Cloud. All Rights Reserved. 腾讯云 版权所有
深圳市腾讯计算机系统有限公司 ICP备案/许可证号：粤B2-20090059 
粤公网安备44030502008569号
腾讯云计算（北京）有限责任公司 京ICP证150476号 | 京ICP备11018762号