Question

我有一个小的SVG动画，我一直在玩，我想知道是否有一个简单的解决方案，以解决以下问题。

有没有办法改变圆圈开始的起点？因为它似乎始终在右手3点钟位置开始并顺时针转动。理想情况下，我希望它开始在线完成动画的地方和时间。示例：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>

Answer 1

您需要使用

    RestAdapter restAdapter = new RestAdapter.Builder()
.setLogLevel(RestAdapter.LogLevel.FULL)
.setEndpoint("https://api.github.com")
.build();

这是一个工作代码

transform="rotate(<angle>)"

您可以找到解释良好的教程here

Here有一个Jsfiddle从某个地方复制过来。（图片）

希望这个帮助

Answer 2

您可以使用ransform:rotate(180 ...)旋转圆圈，并使用animation-delay延迟圆圈动画。

http://jsfiddle.net/6sp2fv2q/

SVG动画开始位置

2 个答案: