AlibekKulseitov
@AlibekKulseitov
Люблю верстать и писать музыку

Как получить стили svg?

Мне нужно анимировать свг иллюстрации с помощью https://github.com/Prinzhorn/skrollr/tree/master/e... но там в примерах анимация осуществляется с помощью css стилей типа
fill:none;stroke:#333333;stroke-width:7;stroke-linecap:round;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:6000;stroke-dashoffset:0


Как получить такие же свойства любой svg картинки?

Сейчас например я имею вид

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 222.887 287.876" width="222px" height="287px">
                                <g transform="translate(-0.002 -0.009)">
                                    <path fill="#fff" d="M180.962,30.514A10.852,10.852,0,0,0,178,30.13c-5.481,0-11.912,3.142-17.137,5.664l-2.686,1.279c-7.856,3.654-14.616,9.372-21.083,14.908l-.128.11A85.136,85.136,0,0,0,92.227,39.758,91.348,91.348,0,0,0,32.175,62.212,71.251,71.251,0,0,0,8.717,110.827C8.406,113,8.2,114.9,8.077,116.692c-1.206,16.443,3.654,33.835,14.086,50.15l-.329.4c-5.481,6.5-11.272,13.227-14.89,21.083l-1.279,2.686c-2.923,6.029-6.906,14.287-5.3,20.1a9.829,9.829,0,0,0,10.341,7.874c7.308,0,16.7-4.86,23.568-8.4l2.539-1.315c6.1-3.088,12.369-6.6,18.672-10.432a64.053,64.053,0,0,0,30.638,8.185h0q1.644,0,3.289-.11c21.522-1.242,46.222-12,62.939-27.4,24.865-22.928,31.131-60.089,15.566-92.627,4.092-6.614,7.856-13.319,11.181-19.914.4-.786.84-1.644,1.315-2.539,4.293-8.313,10.779-20.864,7.509-28.373a9.957,9.957,0,0,0-6.961-5.536ZM24.483,170.295c1.827,2.558,3.654,5.024,5.481,7.308A88.99,88.99,0,0,0,47.192,193.68a174.055,174.055,0,0,1-30.51,14.963c-3.38,1.206-5.627,1.06-6.668-.585-2.229-3.508.749-12.971,3.161-18.105a92.133,92.133,0,0,1,11.309-19.658Zm124.8-7.582h0a9.92,9.92,0,0,0-5.189,2.576l-.877.694a64.562,64.562,0,0,0-6.741,6.065l-.292.274a3.161,3.161,0,0,0-.731,3.526,3.471,3.471,0,0,0,3.124,2.174,3.234,3.234,0,0,0,1.608-.438l.585-.347a72.583,72.583,0,0,1-8.313,5.81c-10.962,6.559-27.77,14.4-46.076,14.4a56.069,56.069,0,0,1-21.924-4.312,288.343,288.343,0,0,0,27.77-20.919l2.923-2.5c3-2.539,6.084-5.17,9.135-7.856a161.269,161.269,0,0,0,14.305-13.081,163.143,163.143,0,0,0,13.063-14.287q1.827-2.046,3.654-4.111a17.1,17.1,0,0,0-1.5,3.161,13.044,13.044,0,0,0,1.242,11.619,7.765,7.765,0,0,0,5.956,3.49,4.677,4.677,0,0,0,3.8-1.827,3.526,3.526,0,0,0,.42-3.654,2.868,2.868,0,0,0-2.74-1.608h0a1.717,1.717,0,0,1-1.443-.6,6.065,6.065,0,0,1-.365-4.567,19.219,19.219,0,0,1,2.393-5.481l.749.2a9.136,9.136,0,0,0,3.453.384,1.937,1.937,0,0,0,1.553-1.973c-.219-2.978-2.686-4.7-7.308-5.1H141.3a2.576,2.576,0,0,0-1.06.238l1.955-2.3a287.407,287.407,0,0,0,20.1-26.619,74.263,74.263,0,0,1,2.631,7.655,3.307,3.307,0,0,0-2.868-1.644,2.613,2.613,0,0,0-1.991.84c-1.169,1.315-.913,3.654-.767,5.207v.365c.11,1.224.347,2.448.566,3.654l.2,1.151a5.189,5.189,0,0,0,1.516,3.416,2.777,2.777,0,0,0,1.827.694,2.5,2.5,0,0,0,1.827-.731,6.815,6.815,0,0,0,1.425-5.481,73.59,73.59,0,0,1,1.151,12.789,67.762,67.762,0,0,1-17.064,44.085,7.106,7.106,0,0,0,.621-3.179,1.937,1.937,0,0,0-2.083-1.845Zm4.64-70.3a320.342,320.342,0,0,1-29.688,37.069c-3.435,3.343-6.833,6.869-10.1,10.286l-2.174,2.3-2.339,2.247c-3.416,3.27-6.942,6.65-10.231,10.048A321.778,321.778,0,0,1,62.283,184.07q-3.307,2.229-6.723,4.4a87.2,87.2,0,0,1-37.288-53.256C12.224,109.2,23.752,87.2,34.586,73.393a79.783,79.783,0,0,1,36.064-23.4,70.9,70.9,0,0,1,20.973-3.2c26.564,0,52.452,15.566,66.154,39.7C156.5,88.538,155.293,90.493,153.923,92.411Zm-3.088-29.505a81.809,81.809,0,0,0-10.4-8.532,95.349,95.349,0,0,1,19.348-10.962A40.887,40.887,0,0,1,174.4,39.484a5.042,5.042,0,0,1,4.385,1.553c.84,1.188.767,3.161-.2,5.883A177.217,177.217,0,0,1,163.168,78.2a84.532,84.532,0,0,0-12.332-15.292Z" transform="translate(0.002 24.933)"/>
                                    <path fill="#fff" d="M54.408,28.764a14.926,14.926,0,0,0,9.281,3.069A15.694,15.694,0,0,0,79.017,21.054,16.443,16.443,0,0,0,76.825,6.932,16.735,16.735,0,0,0,63.908.008a14.232,14.232,0,0,0-12.46,6.212,20.626,20.626,0,0,0-1.407,2.923,12.935,12.935,0,0,0-1.937,5.682A15.712,15.712,0,0,0,54.408,28.764Zm15.767-9.9a6.358,6.358,0,0,1-6.1,3.91,8.13,8.13,0,0,1-5.335-2.01,7.308,7.308,0,0,1-2.174-5.791,4.932,4.932,0,0,1,.238-1.443A8.9,8.9,0,0,1,63.89,9.142h.274a6.3,6.3,0,0,1,5.28,2.923,7.417,7.417,0,0,1,.731,6.8Z" transform="translate(39.739 0.009)"/>

                            </svg>
  • Вопрос задан
  • 100 просмотров
Пригласить эксперта
Ответы на вопрос 1
politon
@politon
HTML5,CSS3,JS,PHP,SQL,API,canvas,animation...
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы