div不使用动漫js在缩放的svg上遵循svg路径

Question

我正在尝试在svg路径下缩放并使div跟随它，但div仍然遵循svg路径的先前大小而不是缩放后的大小

我尝试更改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
    });