Animate SVG заполните слева направо

У меня есть этот SVG, который я хочу плавно заполнить слева направо. Как я могу это сделать с помощью CSS?Animate SVG заполните слева направо

Я не хочу, чтобы линия двигалась, я хочу, чтобы она плавно переместилась слева направо, оставаясь на том же месте, поэтому я использую svg.

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="324" height="25" viewBox="0 0 324 25"> 
<g id="btn_underline"> 
<path id="V" d="M88.029,0.613 C58.722,-0.156 29.992,3.400 1.839,11.183 C-1.140,12.047 0.205,16.660 3.184,15.795 C28.262,8.781 54.014,5.321 80.438,5.321 C83.801,5.321 86.203,5.321 87.836,5.417 C96.196,5.610 105.324,6.282 115.413,7.339 C125.503,8.396 133.958,9.453 140.588,10.510 C147.218,11.471 156.346,12.912 167.781,14.834 C182.098,17.236 194.397,19.158 204.582,20.599 C223.511,23.194 240.519,24.443 255.412,24.443 C259.256,24.443 262.138,24.443 264.060,24.347 C274.726,23.962 284.623,23.001 293.655,21.368 C303.936,19.542 313.449,17.044 322.385,13.873 C323.634,13.489 324.307,12.047 323.826,10.798 C323.250,9.357 322.193,8.877 320.751,9.357 C311.815,12.624 302.495,15.026 292.790,16.660 C283.758,18.197 274.149,19.158 263.868,19.542 C246.668,20.023 227.066,18.774 205.159,15.795 C195.742,14.546 183.539,12.624 168.549,10.126 C156.635,8.108 147.506,6.667 141.069,5.706 C134.631,4.745 126.271,3.688 115.990,2.631 C105.709,1.478 96.388,0.805 88.029,0.613 z" fill="#00363B" /> 
</g> 
</svg>

http://codepen.io/anon/pen/GrQPvK

источник

2017-02-01 followthemadhat

Вы даже пробовали искать? https://css-tricks.com/animating-svg-css/ – Justinas

Способ создания SVG сделает еще более сложным анимировать эту строку. Зачем вы это сделали, используя 'fill', когда он мог быть легко создан с помощью' stroke' (а может быть, 'width-width' для толщины)? – Harry

Да, я просто заметил, что путь не совсем правильный, чтобы сделать эту анимацию возможной, спасибо – followthemadhat

Вы действительно можете сделать это в CSS со свойством хода.

Прошу прощения, я не могу использовать ваш SVG, потому что это форма, и для того, чтобы сделать ваш эффект, вам нужен только путь без заполнения. Итак, я беру это SVG для примера (из этой статьи: https://jakearchibald.com/2013/animated-line-drawing-svg/):

<svg xmlns="http://www.w3.org/2000/svg" height="98" width="581" viewBox="0 0 581 98"> 
    <path 
     class="path" 
     d="M62.9 14.9c-25-7.74-56.6 4.8-60.4 24.3-3.73 19.6 21.6 35 39.6 37.6 42.8 6.2 72.9-53.4 116-58.9 65-18.2 191 101 215 28.8 5-16.7-7-49.1-34-44-34 11.5-31 46.5-14 69.3 9.38 12.6 24.2 20.6 39.8 22.9 91.4 9.05 102-98.9 176-86.7 18.8 3.81 33 17.3 36.7 34.6 2.01 10.2.124 21.1-5.18 30.1" 
     stroke="#000" 
     stroke-width="4.3" 
     fill="none"> 
    </path> 
</svg>

Обратите внимание на stroke и stroke-width свойства. Это начало трюка;). Затем вам нужно добавить CSS:

.path { 
    //we divide the line in multiple dashes (some full and other empty) 
    //these dashes have 1000px in length 
    //so there are one dash full of 1000px of length and then one dash empty of 1000px of length and so on and so forth 
    stroke-dasharray: 1000; 

    //we change the position of the dashes 
    stroke-dashoffset: 1000; 

    //now we animate the dashoffset 
    //we reduce the offset of each dash so we have the impression that the dashes are moving 
    animation: dash 5s linear forwards; 
} 

@keyframes dash { 
    to { 
     stroke-dashoffset: 0; 
    } 
}

И все!

Для получения дополнительной информации вы можете прочитать эту статью тоже: https://css-tricks.com/svg-line-animation-works/

источник

2017-02-01 11:13:58

большое спасибо, это действительно полезно – followthemadhat

Добро пожаловать. Это удовольствие ^^. Если у вас есть вопросы, не стесняйтесь спрашивать меня. (и если вы можете повысить/проверить ответ, было бы здорово!) –

Вы могли бы работать с этим.

svg { 
    left: -400px; 
    position:absolute; 
} 

@keyframes example { 
    from {left: -400px;} 
    to {left: 200px;} 
} 

@-webkit-keyframes example { 
    from {left: -400px;} 
    to {left: 200px;} 
} 

svg { 
    animation-name: example; 
    animation-duration: 4s; 
    animation-delay: 2s; 
    animation-iteration-count: infinite; 
    animation-timing-function: ease-in-out; 
}

ccodepen: http://codepen.io/anon/pen/egVbMV

источник

2017-02-01 07:21:02

спасибо, но я не хочу, чтобы линия двигалась, я хочу, чтобы она плавно переместилась слева направо, оставаясь в том же месте, поэтому я использую svg. – followthemadhat

Ahh kk, извините неправильно прочитал вопрос. Но я не думаю, что вы сможете сделать это с помощью css. Единственный способ, которым я могу придумать это с помощью css, - это разместить svg внутри div , тогда у вас будет другой div, абсолютно позиционированный внутри этого div, который совпадает с высотой и тем же цветом фона #fff, но с z -index как 999. Таким образом, он сидит на вершине svg. , затем используйте css для анимации ширины верхнего div. Также установите правильное положение верхнего div на 0px, чтобы он придерживался вправо. Извините, что вам нужно спрыгнуть на день, так что не можете найти код. Надеюсь, ты поймешь мой explanaiton –

На самом деле я могу, но не совсем так, как хотел. это проблема с самим svg. но спасибо в любом случае – followthemadhat

Попробуйте

.fadeIn { 
    animation-name: fade-in-left; 
    animation-duration: 1s; 
} 

@keyframes fade-in-left { 
    0% { 
    opacity: 0; 
    transform: translate3d(-100%, 0, 0); 
    } 

    100% { 
    opacity: 1; 
    transform: none; 
    } 
}

Live Demo - http://codepen.io/anon/pen/MJQLgG

источник

2017-02-01 07:45:18 grinmax

@followthemadhat может быть так http://codepen.io/anon/pen/dNdrpz – grinmax

ответ

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