有些问题没搞明白
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> </head> <body> <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40" x="200" y="160">慕 <animateMotion path="M 0 0, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" dur="3s"/> </text> <path d="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" fill="transparent" stroke="#00f" /> </svg> </body> </html>
问题1、在上边代码中，文字可以沿路径移动，但为什么animateMotion中的path属性M为 0 0而不是200 160？是因为animateMotion在text里面所以以文字所在位置为坐标原点吗？
<animateMotion path="M 0 0, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" dur="3s" rotate="auto"/>
问题2、将代码修改一下，填加rotate属性，文字运动的路径发生改变，以（0，0）点为圆心移动，为什么出现这种现象？
<animateMotion path="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" dur="3s" rotate="auto"/>
问题3、又修改了一下代码，为了使文字沿路径运动，修改了path的M点，结果运动路径还是不对，运动起始点的位置也搞不懂。
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> </head> <body> <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40">慕 <animateMotion path="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" dur="3s" rotate="auto" /> </text> <path d="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" fill="transparent" stroke="#00f" /> </svg> </body> </html>
问题4、最后去掉了text里的x y属性值，文字终于可以沿路径运动，但运动完文字回到（0，0）点位置，请问text的x y属性，animateMotion的path属性的M值和rotate属性是怎么相互影响的？
<!doctype html> <html> <head> <meta charset="UTF-8"> <title>动画效果</title> </head> <body> <svg width="900" height="500" xmlns="http://www.w3.org/2000/svg"> <text font-family="microsoft yahei" font-size="40">慕 <animateMotion path="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" dur="3s" rotate="auto" /> <animateTransform attributeName="transform" type="scale" from="1" to="2" dur="3s" /> </text> <path d="M 200 160, a 50 50 0 1 1 100 0, a 50 50 0 1 1 -100 0" fill="transparent" stroke="#00f" /> </svg> </body> </html>
问题5、使用animateTransform放大文字时，按照老师讲的，坐标系也被放大，那为什么文字运动路径并没有被放大？
正在回答 回答被采纳积分+1
你好，可以看下面的解释：
1、<animateMotion>可以让指定的图形元素沿着一条计算后所得路径进行运动。但是path属性规定的路径并不会显示，所以代码中需要使用<path>显示出一个辅助线，便于观察效果。
被引用的元素（也就是沿着路径运动的元素）实际运动路径的坐标是在元素初始坐标基础上，通过路径坐标对其进行translate()转换，例如元素的初始坐标是（10,10），路径对应当前点的坐标是（100,50），那么就进行如下转换：
transform="translate(10 10) translate(100 50)"
所以无论是将<text>起始位置变为(0,0)，还是将<animateMotion>标签中开始路径变为M 0 0，都不会进行translate()转换，也就不会偏移设置的路径
（1）如果设置<text>起始位置变为(0,0)，路径动画开始后会有一个跳跃，这是因为元素的初始坐标在（0,0）位置，结束后也会回到(0,0)的位置。
（2）如果<animateMotion>标签中开始路径M 200 160和<path>中一样，那么<text>开始位置为(200,100)，运动的时候，开始就会发生translate()转换，偏移之前的路径进行运动。
2、当rotate属性值为auto时，元素自动根据运动路径的角度（路径曲线的切线方向），也就是<animateMotion>标签中的path路径，来改变它的运动方向，否则文本一直是垂直方向的运动，不会根据路径方向进行改变。
3、如果想要运动路径也要放大，需要将文本的起始位置添加上，设置开始运动的M 0 0：
自己可以测试理解下，祝学习愉快！
相似问题
登录后可查看更多问答，登录/注册
- 参与学习 人
- 提交作业 467 份
- 解答问题 4826 个
本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识，不仅如此，还会学习如何利用组件化的思想来开发网页，知识点+案例，使得所学可以更好的得到实践。
了解课程
恭喜解决一个难题，获得1积分~
来为老师/同学的回答评分吧
0 星