使用 Javascript 将一个 SVG 沿着另一个 SVG 移动

问题描述 投票：0回答：1

我在使用 JavaScript 创建动画以在单击（使用 onclick 事件）时沿着 SVG 元素移动 SVG 元素时遇到一些困难。 这意味着，我有一条路，我想让我的角色沿着这条路移动。 具体来说，我希望 id 为“main-character”的 SVG 元素沿着 id 为“global-main-path”的路径移动。 这是我的代码，包括 CSS 和 HTML。

人物 HTML

<svg xmlns="http://www.w3.org/2000/svg" width="48" height="48" viewBox="0 0 48 48" fill="none">
  <g clip-path="url(#clip0_72_161)">
    <path d="M18.6686 25.3457C16.9206 21.0107 12.0961 17.235 8.04079 16.9903C2.0976 16.6757 -1.32848 11.7463 0.489442 5.62833C2.9716 6.88689 5.34887 10.9422 8.14567 8.14544C10.8376 5.41857 7.37655 3.00633 5.66351 0.803856C10.3481 -1.36366 16.4312 0.978656 16.5361 5.94297C16.7109 12.7951 21.5004 15.6618 25.3809 19.5773C25.4159 20.5912 25.9403 21.1156 26.9541 21.1505C29.5761 23.8425 32.1632 26.5344 34.7851 29.2263C35.4843 29.9255 36.1486 30.5198 37.3023 30.38C43.1755 29.6458 46.1821 32.967 48.0699 37.9313V41.2875C46.7065 41.8818 45.6577 41.3574 44.8536 40.2387C43.2455 38.1061 40.7983 37.5118 39.1202 39.2598C37.7218 40.7281 38.1413 43.2452 40.2389 44.6786C42.4763 46.2168 41.008 47.0908 39.6795 47.9998H36.3234C32.6875 45.0981 30.555 41.9517 30.0306 36.7427C29.646 32.932 25.311 29.6808 21.1857 27.7929H21.2556C21.2556 27.5133 21.2556 27.1986 21.2906 26.884C20.976 26.884 20.6613 26.884 20.3467 26.9189L20.4166 26.9889C20.4166 26.6742 20.4166 26.3596 20.4516 26.0449C20.1369 26.0449 19.8223 26.0449 19.5077 26.0799L19.5776 26.1498C19.5776 25.8352 19.5776 25.5205 19.6125 25.2059C19.2979 25.2059 18.9833 25.2059 18.6686 25.2409H18.7036L18.6686 25.3457Z" fill="url(#paint0_radial_72_161)"/>
    <path d="M21.1158 27.828C20.941 29.576 19.9622 31.2891 21.9199 32.8623C22.9687 33.7013 21.6752 34.5753 21.0459 35.2395C17.8995 38.4209 14.7881 41.6372 11.5018 44.6787C8.56521 47.4056 4.6497 47.3357 2.09762 44.7486C-0.524371 42.0917 -0.559331 38.3859 2.2025 35.3444C4.37002 32.9671 6.60746 30.6598 9.05465 28.5622C10.9775 26.8841 12.3409 22.6889 16.1515 26.3248C16.4312 26.5695 17.7946 25.6955 18.6686 25.3459L18.6337 25.3109C18.354 26.1849 18.6337 26.4996 19.5426 26.2199L19.4727 26.15C19.193 27.024 19.4727 27.3386 20.3817 27.0589L20.3118 26.989C20.0321 27.863 20.3118 28.1776 21.2207 27.8979H21.1508L21.1158 27.828ZM9.57905 40.6583C9.85873 40.3786 10.1384 40.099 10.4181 39.8193C10.6978 39.5396 10.9775 39.2599 11.2571 38.9803C11.5368 38.7006 11.8165 38.4209 12.0962 38.1412L12.9352 37.3022C13.2149 37.0225 13.4946 36.7428 13.7742 36.4631C14.0539 36.1835 14.3336 35.9038 14.6133 35.6241C15.2426 35.3444 15.9767 34.6452 15.5222 34.1907C14.7182 33.3867 14.1938 34.4005 13.7043 34.9948C13.4246 35.2745 13.145 35.5542 12.8653 35.8339C12.5856 36.1135 12.3059 36.3932 12.0262 36.6729C11.7466 36.9526 11.4669 37.2323 11.1872 37.5119C10.9075 37.7916 10.6279 38.0713 10.3482 38.351C10.0685 38.6307 9.78881 38.9103 9.50913 39.19C9.22945 39.4697 8.94977 39.7843 8.63513 40.064C8.39041 40.1689 8.21561 40.3437 8.14569 40.5884C7.72618 40.973 6.81722 41.2876 7.30666 41.9518C7.83106 42.651 8.39041 42.1266 8.74001 41.4974C9.01969 41.2177 9.29937 40.938 9.57905 40.6583ZM7.23674 37.8266C7.51642 37.5469 7.83106 37.2672 8.11073 36.9526C8.39041 36.6729 8.67009 36.3932 8.94977 36.1135C9.22945 35.8339 9.50913 35.5542 9.78881 35.2745C10.0685 34.9948 10.3482 34.7151 10.6279 34.4355C10.9075 34.1558 11.1872 33.8761 11.4669 33.5964C12.0612 32.9671 13.5295 32.5127 12.5506 31.4988C11.9563 30.9045 11.2571 31.9883 10.8376 32.6875C10.5579 32.9671 10.2783 33.2468 9.99857 33.5265C9.71889 33.8062 9.43921 34.0859 9.15953 34.3655C8.87985 34.6452 8.60017 34.9249 8.32049 35.2046C8.04082 35.4843 7.76114 35.7639 7.48146 36.0436C7.20178 36.3233 6.9221 36.603 6.64242 36.8827C6.36274 37.1623 6.08306 37.442 5.80338 37.7217C5.10418 38.1063 4.05538 38.8055 4.6497 39.3648C5.62858 40.2738 6.15298 38.9453 6.71234 38.2811C6.95706 38.1762 7.0969 38.0363 7.20178 37.7916L7.23674 37.8266Z" fill="url(#paint1_radial_72_161)"/>
    <path d="M26.0102 19.4024C25.9752 18.843 25.6606 18.004 25.9053 17.7942C31.1843 13.2494 33.9461 6.32736 40.134 2.65657C40.973 2.16713 41.847 1.57281 42.6511 2.65657C43.4202 3.70537 45.378 4.33465 44.6788 5.94281C43.8048 7.93552 42.791 10.6274 41.1129 11.3616C36.8128 13.2844 34.0859 16.7454 31.0444 19.8918C29.6111 21.3951 28.4574 20.7658 27.059 20.4861C26.7094 20.1365 26.3598 19.7869 26.0102 19.4373V19.4024Z" fill="url(#paint2_radial_72_161)"/>
    <path d="M26.0102 19.4028C26.3598 19.7524 26.7094 20.102 27.059 20.4516C27.0939 20.6963 27.059 20.941 26.8842 21.1508C25.8703 21.1158 25.3459 20.5914 25.311 19.5776C25.5207 19.4028 25.7305 19.3678 26.0102 19.4028Z" fill="url(#paint3_radial_72_161)"/>
  </g>
  <defs>
    <radialGradient id="paint0_radial_72_161" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(24.0357 23.9946) scale(18.4275 43.9139)">
      <stop offset="0.23" stop-color="#BE3538"/>
      <stop offset="0.32" stop-color="#B7333A"/>
      <stop offset="0.44" stop-color="#A63041"/>
      <stop offset="0.58" stop-color="#8A2A4D"/>
      <stop offset="0.73" stop-color="#63235D"/>
      <stop offset="0.89" stop-color="#321971"/>
      <stop offset="1" stop-color="#0B1282"/>
    </radialGradient>
    <radialGradient id="paint1_radial_72_161" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(11.2237 35.7945) scale(8.50498 19.9617)">
      <stop offset="0.23" stop-color="#BE3538"/>
      <stop offset="0.32" stop-color="#B7333A"/>
      <stop offset="0.44" stop-color="#A63041"/>
      <stop offset="0.58" stop-color="#8A2A4D"/>
      <stop offset="0.73" stop-color="#63235D"/>
      <stop offset="0.89" stop-color="#321971"/>
      <stop offset="1" stop-color="#0B1282"/>
    </radialGradient>
    <radialGradient id="paint2_radial_72_161" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(35.32 11.4513) scale(7.28932 17.2075)">
      <stop offset="0.23" stop-color="#BE3538"/>
      <stop offset="0.32" stop-color="#B7333A"/>
      <stop offset="0.44" stop-color="#A63041"/>
      <stop offset="0.58" stop-color="#8A2A4D"/>
      <stop offset="0.73" stop-color="#63235D"/>
      <stop offset="0.89" stop-color="#321971"/>
      <stop offset="1" stop-color="#0B1282"/>
    </radialGradient>
    <radialGradient id="paint3_radial_72_161" cx="0" cy="0" r="1" gradientUnits="userSpaceOnUse" gradientTransform="translate(26.1911 20.2706) scale(0.674784 1.61015)">
      <stop offset="0.23" stop-color="#BE3538"/>
      <stop offset="0.32" stop-color="#B7333A"/>
      <stop offset="0.44" stop-color="#A63041"/>
      <stop offset="0.58" stop-color="#8A2A4D"/>
      <stop offset="0.73" stop-color="#63235D"/>
      <stop offset="0.89" stop-color="#321971"/>
      <stop offset="1" stop-color="#0B1282"/>
    </radialGradient>
    <clipPath id="clip0_72_161">
      <rect width="48" height="48" fill="white"/>
    </clipPath>
  </defs>
</svg>

CSS


#welcome-scr #main-character {
    display: block;
    position: absolute;
    top: 336px;
    left: 755px;
    transition: 2s ease-in-out;
    z-index: 2;
}

和 SVG

 <div class="global-road">
            <svg width="829" height="317" viewBox="0 0 829 317" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path
                    d="M822.194 21.8311C822.194 21.8311 735.075 131.366 620.751 177.866C517.807 219.737 399.411 179.597 276.197 242.257C97.7668 332.997 -17.9017 299.821 -17.9017 299.821"
                    stroke="#1A3D96" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" />
                <path
                    d="M827.976 27.0832C827.976 27.0832 744.117 142.302 629.793 188.802C526.85 230.672 408.454 190.532 285.24 253.193C106.81 343.933 -17.7849 308.836 -17.7849 308.836"
                    stroke="#1A3D96" stroke-width="2" stroke-miterlimit="10" stroke-linecap="round" />
                <path id="global-main-path"
                    d="M802.552 21.9653C802.552 21.9653 719.654 105.689 605.33 152.188C502.386 194.059 382.28 135.33 259.066 197.99C80.6355 288.73 -25.9762 239.894 -25.9762 239.894"
                    stroke="#1A3D96" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round"
                    stroke-dasharray="20 20" />
                <path
                    d="M803.042 1.49833C803.042 1.49833 711.487 89.9355 593.518 126.206C487.293 158.865 372.884 108.473 244.639 160.06C58.9224 234.764 -46.4897 191.919 -46.4897 191.919"
                    stroke="#1A3D96" stroke-width="3" stroke-miterlimit="10" stroke-linecap="round" />
            </svg>
        </div>

和CSS

#welcome-scr .global-road {
    position: absolute;
    left: 0;
    top: 555px;
}

希望你能理解我糟糕的语法。 感谢您的阅读！！！

javascript animation
1个回答
0
投票

您可以在要移动的元素内嵌套一个 animateMotion 元素，并为其指定相同的路径。如果您当前的元素是自动关闭的，请将其更改为打开并嵌套在新元素中，如下所示：

<circle r="7.4" fill="#979797">
    <animateMotion dur="10s" repeatCount="1" fill="freeze" path="M802.552 21.9653C802.552 21.9653 719.654 105.689 605.33 152.188C502.386 194.059 382.28 135.33 259.066 197.99C80.6355 288.73 -25.9762 239.894 -25.9762 239.894" />
</circle>

注意，如果您的元素已经设置了 cx 或 cy 属性，您将需要删除它们，因为此处的路径接管定位。

最新问题
© www.soinside.com 2019 - 2024. All rights reserved.