SVG动画开始位置 [英] SVG animation start position
本文介绍了SVG动画开始位置的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
我有一个正在玩的小SVG动画，我想知道以下问题是否有简单的解决方案.
i have a small SVG animation that i have been playing around with and i was wondering if there is a simple solution for the following issue.
是否可以更改圆的起点?好像总是从右侧3点钟位置开始，然后顺时针旋转.理想情况下，我希望它从动画结束的时间和地点开始.示例: http://jsfiddle.net/matta70/7jvd6fsx/1/
Is there a way of changing the start point of where the circle starts? As it always seems to start on the right hand 3 o'clock position and goes around clockwise. Ideally i want it to start where and when the line finishes animating. Example: http://jsfiddle.net/matta70/7jvd6fsx/1/
.line {
stroke-dasharray: 650;
stroke-dashoffset: 650;
animation: offset 3s linear forwards;
}
.circle {
stroke-dasharray: 230;
stroke-dashoffset: 230;
animation: offset 3s linear forwards;
}
/*========================
* KEYFRAMES
*/
@keyframes offset {
100% {
stroke-dashoffset: 0;
}
}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px"
height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
<g id="Layer_1">
<line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37"/>
<circle class="circle" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36"/>
<circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18"/>
</g>
</svg>
推荐答案
您需要使用
transform="rotate(<angle>)"
这里是工作代码
<style>
.line {
stroke-dasharray: 650;
stroke-dashoffset: 650;
animation: offset 3s linear forwards;
}
.circle {
stroke-dasharray: 230;
stroke-dashoffset: 230;
animation: offset 1s linear forwards 2.3s;
}
/*========================
* KEYFRAMES
*/
@keyframes offset {
100% {
stroke-dashoffset: 0;
}
}
</style>
<body>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="577px" height="74px" viewBox="0 0 577 74" enable-background="new 0 0 577 74" xml:space="preserve">
<g id="Layer_1">
<line class="line" fill="none" stroke="#000000" stroke-width="2" x1="0" y1="37" x2="504" y2="37" />
<circle class="circle" transform="rotate(180 540 37)" fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="36" />
<circle fill="none" stroke="#000000" stroke-width="2" cx="540" cy="37" r="18" />
</g>
您可以在此处
此处，是从某个地方复制过来的一个Jsfiddle. (喜欢图片)
Here there is a Jsfiddle copied from somewhere, time ago. (hove image)
希望获得帮助
这篇关于SVG动画开始位置的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
