SVG动画-旋转和变形问题 [英] SVG animation - rotation and transformation problem
本文介绍了SVG动画-旋转和变形问题的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我需要你的帮助。我对svg动画有疑问。
我想将动画应用于红色箭头（在这里找到我）并实现3件事
I need your help. I have a question regarding to svg animation. I would like to apply animation to red arrows (find me here) and achieve 3 things
- 每个箭头应在给定正方形指定的路径上移动
- 当箭头到达正方形时角应旋转90度（朝动画方向）
- 您会看到正方形的每一侧都有一个缝隙。箭头不应出现在此间隙空间中。当箭头到达间隙时，它应逐渐从间隙的另一侧开始出现。
我知道如何解决第1点中描述的问题。我编写了一个JavaScript程序，该程序将 animateMotion 元素应用于每个箭头并设置 path 属性。箭头在动画。
至于问题2，我尝试将rotate属性设置为auto，但它不起作用。
这是我第一次询问堆栈溢出问题，因此请原谅我是否丢失了一些内容。
I know how to solve problem described in point 1. I wrote javascript program that is applying animateMotion element to each arrow and set path attribute. Arrows are animating.
As for problem 2 I tried setting rotate attribute to auto but it was not working.
This is my first time asking something on stack overflow so please forgive me if I am missing something.
<html>
<head>
<meta charset="utf-8"/>
</head>
<body>
<figure>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 50 200 200">
<title>Layer 1</title>
<line fill="none" stroke="#000000" x1="70" x2="90" y1="85" y2="85"/>
<line fill="none" stroke="#000000" x1="105" x2="125" y1="85" y2="85"/>
<line fill="none" stroke="#000000" x1="125" x2="125" y1="85" y2="105"/>
<line fill="none" stroke="#000000" x1="125" x2="125" y1="120" y2="140"/>
<line fill="none" stroke="#000000" x1="70" x2="90" y1="140" y2="140"/>
<line fill="none" stroke="#000000" x1="105" x2="125" y1="140" y2="140"/>
<line fill="none" stroke="#000000" x1="70" x2="70" y1="85" y2="105"/>
<line fill="none" stroke="#000000" x1="70" x2="70" y1="120" y2="140"/>
<path d="m79.755233,84.987506l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0"/>
<path d="m112.755233,84.987503l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0"/>
<path d="m125.265789,92.87705l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(90 124.988 92.877)"/>
<path d="m125.265736,127.166662l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(90 124.988 127.167)"/>
<path d="m114.755231,139.986834l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(180 114.477 139.987)"/>
<path d="m79.755231,139.987503l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(180 79.477 139.988)"/>
<path d="m70.266077,127.476654l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(-90 69.9878 127.477)"/>
<path d="m70.26573,93.476997l-2.755234,-2.687503l4.953999,2.687503l-4.953999,2.687501l2.755234,-2.687501z" fill="#ff0000" stroke="#ff0000" stroke-width="0" transform="rotate(-90 69.9875 93.477)"/>
</svg>
</figure>
</body>
</html>`
推荐答案
是
<svg xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/2000/svg" viewbox="50 70 200 200">
<path stroke="black" fill="none" d="M70,85H125V140H70V85Z" ></path>
<path d="M0,0 L-2.69,-4.95L0,-2.2L2.69,-4.95L0,0z" transform="rotate(-90)" style="fill: #ff0000;">
<animateMotion path="M70,85H125V140H70V85Z" dur="10s" rotate="auto" repeatCount="indefinite"></animateMotion>
</path>
<g>
<desc>white mask</desc>
<rect x="90" y="80" width="15" height="65" fill="white" />
<rect x="65" y="105" width="65" height="15" fill="white" />
</g>
</svg>
这篇关于SVG动画-旋转和变形问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
