英文:
SVG animateMotion (calcMode spline) not working in FF and Safari
问题
I want to move a circle along a path inside an svg with different easing. I wanted to use animateMotion but have never used it before. Using JS is not an option in this case.
It works fine in Chrome and Opera, but not in Safari and Firefox.
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
keyTimes="0 ; 0.3 ; 0.6 ; 1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0
c0-86.5,55.5-123.5,55.5,111" />
If I remove calcMode, keySplines, and keyTimes, it works in all browsers.
I would also appreciate any alternative solution for moving an element on rounded curves with different easings.
英文:
I want to move a circle along a path inside an svg with different easing. I wanted to use animateMotion but have never used it before. Using JS is not an option in this case.
It works fine in Chrome and Opera, but not in Safari and Firefox.
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0.3 0 1 1"
keyTimes="0 ; 0.3 ; 0.6 ; 1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0
c0-86.5,55.5-123.5,55.5,111" />
If I remove calcMode, keySplines and keyTimes it works in all browsers.
I would also appreciate any alternative solution for moving an element on rounded curves with different easings.
答案1
得分: 4
解决方案
我发现两个独立的问题导致了这个问题：
- Safari不接受KeyTimes值之间的空格（所有其他浏览器都接受，而Safari在KeySplines内也接受）。
- Firefox似乎需要一个额外的值来设置
KeyTimes和KeySplines。因此，我在每一行都添加了一个值。
修复后的代码：
keySplines="0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1"
keyTimes="0; 0.2; 0.4; 0.6; 1"
完整示例：
<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g>
<circle r="13.5" fill="black">
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1; 0 0 0.5 1"
keyTimes="0; 0.2; 0.4; 0.6; 1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
</circle>
<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
</g>
</svg>
英文:
Solution
I figured out, that two things were independently from each other creating the issue:
- Safari does not accept spaces between KeyTimes Values (all other browsers do, and Safari also does within KeySplines).
- Firefox seems to need one more value for
KeyTimesandKeySplines. So I added one value to each line.
Fixed Code:
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
Full Example:
<!-- begin snippet: js hide: false console: true babel: false -->
<!-- language: lang-html -->
<svg version="1.1" id="Layer_5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 500 500" style="enable-background:new 0 0 500 500;" xml:space="preserve">
<g>
<circle r="13.5" fill="black">
<animateMotion
dur="4s"
repeatCount="indefinite"
calcMode="spline"
keySplines="0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1 ; 0 0 0.5 1"
keyTimes="0;0.2;0.4;0.6;1"
path="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111" />
</circle>
<path stroke="red" fill="none" d="M54,183.8c0-86.5,128.5-87.2,128.5,0c0-86.5,116.9-87.2,116.9,0c0-86.5,115.1-87.2,115.1,0c0-86.5,55.5-123.5,55.5,111"/>
</g>
</svg>
<!-- end snippet -->
通过集体智慧和协作来改善编程学习和解决问题的方式。致力于成为全球开发者共同参与的知识库，让每个人都能够通过互相帮助和分享经验来进步。
评论