Начальная позиция анимации SVG

У меня есть небольшая анимация SVG, с которой я играл, и мне было интересно, есть ли простое решение для следующей проблемы.Начальная позиция анимации 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>

источник

2015-08-02 Matta301

Вы должны использовать

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>

Вы можете найти хорошо объяснил учебник here

Here есть Jsfiddle, скопированный откуда-то, время назад. (Дрейфе изображение)

Надежда эта помощь

источник

2015-08-02 20:23:54 Klaujesi

Ах, конечно, я должен от мысли о том, что. Спасибо. – Matta301

Нет проблем. Рад помочь.- – Klaujesi

Вы можете вращать круг, используя ransform:rotate(180 ...) и задержать круг анимации с использованием animation-delay.

http://jsfiddle.net/6sp2fv2q/

источник

2015-08-02 20:39:28 Nikolay

Начальная позиция анимации SVG

ответ

Смежные вопросы