1. дома
  2. Вопрос и ответ
  3. Анимация SVG неправильное направление

Анимация SVG неправильное направление

2016-01-16 5 views
0

Я пытаюсь оживить слово с svg, который я создал. Слово записывается, но в неправильном направлении (начиная с конца слова и заканчивая в начале). Могу ли я контролировать направление анимации?Анимация SVG неправильное направление

@keyframes offset{ 
 
    100%{ 
 
    stroke-dashoffset:0; 
 
    } 
 
} 
 

 
.motEpicerie{ stroke:#000; stroke-width:3px; 
 
\t \t stroke-dasharray:984; 
 
\t \t stroke-dashoffset:984; 
 
\t \t animation:offset 4s linear forwards; 
 
}
<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667" xml:space="preserve"> 
 
    <g> 
 
    <path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08"/> 
 
    </g> 
 
</svg>

https://jsfiddle.net/piieell/jo1ern3r/

Спасибо!

источник

2016-01-16 piieell

ответ

2

Просто измените значение stroke-dashoffset на отрицательное значение.

Конечно, наиболее очевидным решением было бы просто переписать путь в правильном направлении. Предварительное планирование - это все. :)

.motEpicerie { 
    stroke: #000; 
    stroke-width: 3px; 
    stroke-dasharray: 984; 
    stroke-dashoffset: -984; 
    animation: offset 4s linear forwards; 
} 


@keyframes offset { 
 
    100% { 
 
    stroke-dashoffset: 0; 
 
    } 
 
} 
 
.motEpicerie { 
 
    stroke: #000; 
 
    stroke-width: 3px; 
 
    stroke-dasharray: 984; 
 
    stroke-dashoffset: -984; 
 
    animation: offset 4s linear forwards; 
 
}
<svg version="1.1" id="Layer_1" class="epicerie " xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="289.334px" height="147.667px" viewBox="0 0 289.334 147.667" enable-background="new 0 0 289.334 147.667" 
 
xml:space="preserve"> 
 
    <g> 
 
    <path class="motEpicerie" fill-rule="evenodd" clip-rule="evenodd" fill="none" stroke="transparent" stroke-width="3" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M228.293,46.177c-4.689,8.297-10.952,13.491-20.684,13.784c-6.413,0.193-11.021-1.515-11.733-7.494 c-0.903-7.58,7.276-20.367,15.424-22.665c5.503-1.552,10.582,2.217,5.812,7.603c-6.455,7.287-20.035,8.148-20.035,8.148 c-2.399,5.764-3.151,7.966-8.06,12.141c-4.508,3.833-14.247,3.839-8.275-9.593l8.301-19.347c0,0-7.103,16.342-8.301,19.347 c-1.814,4.233-6.919,14.211-14.439,11.617c-7.103-2.45,2.603-18.859,3.811-22.799c-3.501-1.209-12.115-3.761-13.608-6.29 c-2.963-5.02,6.241-7.678,5.849-2.726c-0.459,5.752-11.412,36.231-33.89,32.81c-8.804-2.026-6.048-11.959-6.048-11.959 c0.771-7.007,7.591-14.874,13.038-17.959c3.847-2.178,7.67-1.381,8.536,1.39c0.975,3.118-0.669,5.983-3.25,7.726 c-8.083,5.457-17.817,6.573-17.817,6.573c-1.43,3.532-5.029,7.645-7.839,10.012c-9.926,8.362-28.189,5.832-23.42-7.89 c7.371-21.206,24.367-21.562,21.98-11.38l-0.745,2.174c4.837-10.943-9.491-13.03-18.257,2.527L93.183,44.8 c0,0-4.396,10.209-9.506,13.951c-5.704,4.177-12.03,1.504-8.658-7.711l8.658-21.077l-2.758,6.713 c-7.942,7.561-33.585,8.77-32.967,20.387c0.428,8.049,16.558,3.14,18.419-18.956c0.255-3.033-1.372-12.257-11.787-5.706 c-3.734,2.349-7.263,6.262-7.263,6.262L30.809,77.19l20.24-47.227c-1.11,2.632-4.771,11.649-5.968,14.272 C31.615,73.749,8.633,67.459,3.315,57.511c-5.617-10.506,7.495-26.177,25.397-23.516c3.843,0.571,0.161,3.467-4.757,2.581 c-4.244-0.765-10.965-6.193-9.918-11.854c1.773-9.596,12.306-14.502,21.47-13.243c6.67,0.916,5.462,5.986,2.559,7.76 c-7.335,4.482-14.827,4.854-22.417,2.661c0,0-9.846-2.604-13.387-10.08" 
 
    /> 
 
    </g> 
 
</svg>

источник

2016-01-16 22:21:21

0

Вы должны изменить порядок точек на вашем пути.

Ваш путь довольно сложный с множеством точек, поэтому может быть сложнее выделить точки и переупорядочить их.

Вот простой пример, который работал на меня. (Только изменив порядок полилинии точек)

Старый Путь/Код:

\t .st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
 

 
.g { 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    animation: dash 5s linear forwards; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve"> 
 
    
 
    <polyline class="st2 g" points="163.8,65.5 116.2,83.2 47,59.1 6.5,45 113.8,6.5 223.7,45.3 188.3,56.8 "/> 
 

 
</svg>

Новый путь/Код:

\t .st2{fill:none;stroke:#2D3E99;stroke-width:13;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:10;} 
 

 
.g { 
 
    stroke-dasharray: 1000; 
 
    stroke-dashoffset: 1000; 
 
    animation: dash 5s linear forwards; 
 
} 
 

 
@keyframes dash { 
 
    to { 
 
    stroke-dashoffset: 0; 
 
    } 
 
}
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" 
 
\t viewBox="0 0 230.2 173.4" style="enable-background:new 0 0 230.2 173.4;" xml:space="preserve"> 
 
    
 
<polyline class="st2 g" points="188.3,56.8 223.7,45.3 113.8,6.5 6.5,45 47,59.1 116.2,83.2 163.8,65.5"/> 
 
    
 
    </svg>

было бы неплохо, если бы был инструмент, который бы переупорядочил точки, хотя

источник

2016-05-26 00:00:21 drew

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

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