div не следует пути svg на масштабированном svg с использованием аниме js - PullRequest
Новая
       17

div не следует пути svg на масштабированном svg с использованием аниме js

0 голосов
/ 27 мая 2019

Я пытаюсь масштабировать ниже пути svg и заставить div следовать ему, но div все еще следует предыдущему размеру пути svg, а не масштабированному

Я пытался изменить viewbox, ширину и высоту svg, однако он масштабируется, но div не соответствует масштабированному 

<div class="container-fluid footer-container">
    <svg  class="footer-path-svg" viewBox="0 0 1000 1000" width="1000" height="1000">
        <path class="footer-curve" fill="none" stroke="#FFF" d="M8,56 C8,33.90861 25.90861,16 48,16 C70.09139,16 88,33.90861 88,56 C88,78.09139 105.90861,92 128,92 C150.09139,92 160,72 160,56 C160,40 148,24 128,24 C108,24 96,40 96,56 C96,72 105.90861,92 128,92 C154,93 168,78 168,56 C168,33.90861 185.90861,16 208,16 C230.09139,16 248,33.90861 248,56 C248,78.09139 230.09139,96 208,96 L48,96 C25.90861,96 8,78.09139 8,56 Z"></path>
    </svg>
    <div class="square-obj"></div>
    <div class="circle-obj"></div>
</div>

    let path = anime.path('path.footer-curve');
    anime({
        targets: 'div.square-obj',
        translateX: path('x'),
        translateY: path('y'),
        // rotate: path('angle'),
        easing: 'linear',
        duration: 2000,
        loop: true
    });
    anime({
        targets: 'div.circle-obj',
        translateX: path('x'),
        translateY: path('y'),
        // rotate: path('angle'),
        easing: 'linear',
        duration: 2000,
        loop: true
    });
...