Question

我正在尝试使用SVG元素和AnimeJS库来使橙色标记遵循此RC赛车的路线。

但是无论我尝试什么，我都会感到非常奇怪和令人讨厌的结果。

有时候，我可以看到路径后面的标记，但是它所位于的路径偏离了路线并且不在同一范围内，有些情况下我尝试完全看不到标记，但是可以看到页面上的滚动条改变，表明标记在那里并且正在移动。

我还可以查看浏览器的检查工具，并且可以看到元素的样式正在快速变化-translateX，translateY和Rotate。

正如我在此处留下的代码所示，标记正在移动。如果您仔细查看JSFiddle演示，并等待9.49秒完成每一圈，您会看到橙色球闪烁了十亿分之一秒，但该球没有缩放，我也不知道它要走什么路。

我在做什么错？如何做到这一点？如果有帮助，我愿意使用其他库或工具。

HTML

<section id="race-event-overview">
    [...]
    <div class="race-track-map">
        <svg class="race-track" viewBox="0 0 560 350" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd"
            stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
            <path class="track"
                d="M648.018 1019s-26.755-194 194-194H2618.98c220.76 0 194 194 194 194v527h-.24s10.84 139-112.49 139-112.49-139-112.49-139h-.24v-286s11.83-148-109.52-148H1413s-81-1.45-81 111c0 0-11.07 108 127 108h807s102-6.22 102 107-116 108-116 108h-247s-204.73 67.41-226.18 61.85c-86.34-22.36-182.03-60.17-220.82-61.85h-347s-103 6.77-103-100v-115s5.06-108-118-108c-123.058 0-113 108-113 108v134s10.542 109-121 109-109-118-109-118v-437"
                fill="none" stroke="#2f3b42" stroke-width="88.44"
                transform="matrix(-.20047 .08679 -.08673 -.2006 718.369 267.998)" />
            <circle class="ball" cx="2903.86" cy="664.618" r="31.382" fill="#ff5000" transform="matrix(-.16499 .12905 -.12897 -.1651 775.915 26.115)" />
            <path
                d="M305.953 299.197c.673-.28 1.187-.623 1.536-1.032.352-.41.582-.857.695-1.336a3.82 3.82 0 0 0 .046-1.488 6.622 6.622 0 0 0-.42-1.486 4.669 4.669 0 0 0-.805-1.32 3.496 3.496 0 0 0-1.122-.86c-.42-.201-.889-.305-1.4-.304-.512-.002-1.053.115-1.624.351l-.942.391 3.093 7.474.943-.39zm-1.479 1.48l-3.725-9 1.913-.793c.749-.31 1.438-.456 2.072-.434.638.02 1.21.161 1.723.42.514.263.96.624 1.337 1.08.382.454.687.967.92 1.53.226.546.383 1.127.471 1.743a4.598 4.598 0 0 1-.09 1.788 4.008 4.008 0 0 1-.862 1.619c-.43.503-1.043.92-1.846 1.253l-1.913.793zM309.778 287.935l2.975-1.233c.308-.128.64-.165.996-.115.357.053.698.16 1.018.318.321.161.61.36.867.598.257.235.435.479.537.725.072.174.112.385.121.632.012.246-.01.507-.065.78a3.992 3.992 0 0 1-.265.83c-.12.277-.28.534-.478.777.37.376.709.71 1.016 1.008.309.294.6.571.878.828.28.256.553.497.825.726.27.225.552.46.845.7-.09.074-.18.145-.274.21-.078.054-.171.112-.268.176-.1.065-.199.119-.301.161a36.469 36.469 0 0 1-1.164-1.024c-.34-.307-.72-.655-1.134-1.052-.414-.395-.82-.809-1.22-1.235l-2 .828 1.66 4.011a2.996 2.996 0 0 1-.189.1c-.059.027-.118.055-.18.08a7.99 7.99 0 0 1-.26.101 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.355-.218.498-.414.141-.2.252-.416.33-.646.081-.234.127-.471.137-.713a1.404 1.404 0 0 0-.086-.613 1.44 1.44 0 0 0-.382-.518 2.506 2.506 0 0 0-.6-.408 2.173 2.173 0 0 0-.686-.21 1.212 1.212 0 0 0-.64.07l-2.01.833 1.429 3.452 2.01-.833zM322.842 293.064a1.348 1.348 0 0 1-.204.112l-.192.08c-.085.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.06-.035.128-.07.213-.108a3.347 3.347 0 0 1 .45-.187c.076-.028.15-.052.216-.07l3.725 9zM327.345 280.57a3.548 3.548 0 0 1 .872-.18c.36 1.541.617 2.928.762 4.153.153 1.225.25 2.276.293 3.149.052 1.022.05 1.924-.005 2.71-.051.03-.106.06-.156.091-.054.033-.113.06-.176.086l-.202.084c-.149.062-.27.109-.356.134-.087.026-.16.05-.23.069a23.798 23.798 0 0 1-1.949-1.954 41.468 41.468 0 0 1-2.028-2.436 41.908 41.908 0 0 1-2.361-3.417c.08-.06.16-.123.245-.185.082-.05.164-.104.254-.162.088-.053.184-.113.289-.173a34.127 34.127 0 0 0 1.992 2.946 51.55 51.55 0 0 0 1.89 2.36c.67.784 1.32 1.501 1.95 2.15l.05-.02a51.588 51.588 0 0 0-.483-5.928 37.681 37.681 0 0 0-.65-3.476zM330.873 279.193l4.508-1.869c.031.051.063.112.095.182.033.07.06.129.08.178.043.102.076.19.101.26.025.066.041.123.05.166l-3.667 1.52 1.315 3.177 3.178-1.317c.047.064.08.127.104.187l.077.186c.03.071.057.137.075.197.022.06.04.12.055.181l-3.178 1.317 1.468 3.546 3.666-1.52a1.1 1.1 0 0 1 .102.182l.068.166c.03.071.057.144.081.21.026.07.044.13.055.182l-4.508 1.869-3.725-9zM338.282 276.122l2.975-1.233c.309-.127.644-.166 1-.116.356.053.694.16 1.014.32.324.16.61.359.87.596.254.236.432.48.534.726.072.174.116.384.124.631.01.248-.014.508-.068.782a3.97 3.97 0 0 1-.262.828 3.389 3.389 0 0 1-.48.778c.369.376.708.71 1.015 1.009.309.293.604.57.88.826.278.257.551.498.823.727.271.226.552.46.849.7-.09.074-.181.145-.277.211-.079.053-.169.11-.27.175a1.837 1.837 0 0 1-.3.162 36.469 36.469 0 0 1-1.163-1.024 51.803 51.803 0 0 1-1.132-1.054 31.187 31.187 0 0 1-1.223-1.234l-2 .829 1.661 4.01a3.974 3.974 0 0 1-.63.281 2.008 2.008 0 0 1-.215.07l-3.725-9zm4.609 3.054c.191-.08.358-.218.498-.414.141-.199.252-.416.334-.647.078-.233.123-.47.137-.713a1.45 1.45 0 0 0-.087-.613 1.484 1.484 0 0 0-.382-.518 2.702 2.702 0 0 0-.6-.407 2.241 2.241 0 0 0-.689-.21 1.204 1.204 0 0 0-.64.07l-2.01.834 1.429 3.451 2.01-.833zM349.138 271.567c.37-.154.726-.251 1.057-.291.331-.04.621-.05.87-.033.296.015.567.063.809.137-.002.215-.125.514-.367.892a2.6 2.6 0 0 0-.626-.13 3.599 3.599 0 0 0-.659-.007 2.48 2.48 0 0 0-.769.194c-.66.274-1.07.598-1.237.972-.165.376-.133.842.097 1.396.145.351.32.603.519.762.2.158.421.257.662.291.242.034.499.024.771-.028.27-.052.551-.108.841-.175.306-.07.62-.126.948-.168.327-.042.644-.02.954.066.308.083.603.253.878.507.276.254.518.629.725 1.129.185.445.273.854.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.31-.426.588-.755.835a5.327 5.327 0 0 1-1.186.659c-.428.177-.818.285-1.17.317-.353.036-.655.041-.907.015a3.244 3.244 0 0 1-.818-.19c.025-.094.062-.2.109-.313.036-.089.083-.185.137-.29.053-.107.117-.203.193-.292.194.087.404.15.632.184.2.03.427.037.677.02.254-.018.533-.087.833-.211.722-.3 1.186-.666 1.39-1.102.208-.434.191-.936-.045-1.507-.154-.372-.338-.647-.552-.816a1.473 1.473 0 0 0-.703-.318 2.362 2.362 0 0 0-.807.023c-.286.052-.576.112-.873.178a7.665 7.665 0 0 1-.923.162c-.31.034-.616.014-.912-.061a1.998 1.998 0 0 1-.829-.46c-.258-.227-.482-.573-.672-1.033-.177-.429-.263-.822-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.297.383-.564.675-.795a4.402 4.402 0 0 1 1.049-.602zM211.104 51.174l3.093-1.281c.28-.116.577-.15.898-.101.323.046.64.163.946.347.31.183.596.43.864.737.265.308.484.67.655 1.08a3.7 3.7 0 0 1 .18 2.289 2.608 2.608 0 0 1-.421.92c-.19.267-.423.457-.703.573l-2.247.932 1.305 3.154a2.34 2.34 0 0 1-.184.096c-.061.03-.12.057-.174.08a7.99 7.99 0 0 1-.26.1c-.084.032-.16.057-.227.074l-3.725-9zm4.969 3.923a1.17 1.17 0 0 0 .511-.413c.136-.19.23-.414.282-.67.053-.252.062-.527.03-.818a3.147 3.147 0 0 0-.227-.87 3.344 3.344 0 0 0-.472-.816 2.413 2.413 0 0 0-.597-.555 1.756 1.756 0 0 0-.664-.254 1.19 1.19 0 0 0-.651.076l-2.01.833 1.788 4.32 2.01-.833zM223.692 56.501a1.348 1.348 0 0 1-.205.112l-.191.08c-.086.035-.175.068-.262.101a1.95 1.95 0 0 1-.221.072l-3.725-9c.059-.035.13-.071.212-.108a3.347 3.347 0 0 1 .452-.187c.078-.03.149-.052.215-.07l3.725 9zM225.098 46.296l-2.499 1.035a.653.653 0 0 1-.056-.104c-.022-.037-.045-.075-.062-.118l-.057-.137c-.017-.04-.04-.107-.076-.2a5.995 5.995 0 0 1-.074-.227l5.88-2.436c.047.074.086.145.115.216l.08.192c.032.077.058.15.083.216.023.064.038.118.046.162l-2.498 1.035 3.4 8.214a1.435 1.435 0 0 1-.225.12l-.205.085c-.089.037-.17.067-.248.096a1.96 1.96 0 0 1-.205.065l-3.4-8.214zM232.702 42.167c.37-.154.725-.25 1.057-.29.33-.04.621-.05.87-.033.296.014.567.063.808.137 0 .214-.125.513-.366.891a2.6 2.6 0 0 0-.626-.129 3.599 3.599 0 0 0-.659-.008 2.48 2.48 0 0 0-.769.195c-.66.273-1.07.598-1.237.971-.165.377-.133.842.096 1.396.146.352.32.604.52.762.2.159.42.258.662.292.242.033.499.024.771-.029.27-.051.551-.108.841-.174.306-.07.62-.127.947-.169.328-.041.645-.019.955.067.308.083.602.252.878.506s.518.63.725 1.13c.184.445.273.853.27 1.226a2.098 2.098 0 0 1-.265 1.024c-.173.309-.426.588-.755.835a5.327 5.327 0 0 1-1.186.658c-.428.178-.818.286-1.17.318-.353.036-.655.04-.907.014a3.244 3.244 0 0 1-.818-.19c.025-.094.061-.2.108-.312.037-.09.084-.186.137-.291.054-.106.117-.203.194-.292.194.088.404.151.632.184.2.03.426.037.677.02.253-.017.533-.086.833-.21.722-.3 1.186-.666 1.39-1.102.208-.435.191-.936-.045-1.508-.154-.371-.338-.646-.552-.816a1.473 1.473 0 0 0-.703-.317 2.362 2.362 0 0 0-.807.023c-.286.052-.576.111-.873.178a7.665 7.665 0 0 1-.923.161c-.31.035-.617.015-.912-.06a1.998 1.998 0 0 1-.83-.46c-.257-.228-.48-.574-.671-1.034-.177-.428-.263-.821-.261-1.18a2.18 2.18 0 0 1 .24-.987c.159-.296.383-.563.675-.795a4.402 4.402 0 0 1 1.049-.602zM500.743 4.226c.158.359.263.68.322.966.057.289.092.534.11.74a3.55 3.55 0 0 1-.038.643 2.036 2.036 0 0 1-.818-.308c.017-.128.023-.274.017-.439a6.131 6.131 0 0 0-.097-.53 3.995 3.995 0 0 0-.254-.737c-.182-.411-.4-.74-.658-.984a1.873 1.873 0 0 0-.948-.481c-.377-.075-.823-.055-1.337.054-.513.11-1.11.317-1.793.618-1.324.585-2.197 1.204-2.62 1.866-.422.661-.454 1.398-.094 2.216.124.28.25.512.378.69.132.179.251.32.362.419.123.112.245.2.364.257-.01.165-.034.303-.068.415a1.397 1.397 0 0 1-.257.495 3.279 3.279 0 0 1-.538-.432 4.925 4.925 0 0 1-1-1.509c-.514-1.168-.51-2.176.015-3.03.523-.854 1.545-1.616 3.061-2.286.77-.34 1.458-.57 2.069-.692.612-.12 1.155-.125 1.637-.017.48.11.9.335 1.259.679.361.342.67.805.926 1.387zM496.267 18.149a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.829-.546 1.25-.85l1.232-.884-1.441-3.268c-.483.103-.979.208-1.481.32-.505.112-.992.23-1.468.356a1.45 1.45 0 0 1-.088-.172 1.154 1.154 0 0 1-.083-.157l-.073-.165c-.02-.045-.04-.097-.061-.154a1.746 1.746 0 0 1-.055-.17 49.542 49.542 0 0 1 4.244-.913 44.45 44.45 0 0 1 3.101-.406c.984-.09 1.832-.13 2.55-.122.065.102.118.199.16.291l.118.27c.034.077.063.152.086.218.027.069.049.126.07.174.018.055.033.105.05.145A31.595 31.595 0 0 1 502.225 14a48.029 48.029 0 0 1-2.413 2.012 54.36 54.36 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.09-.16c-.026-.05-.05-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a25.604 25.604 0 0 0 1.588-1.237c.494-.419.927-.794 1.299-1.125.43-.395.83-.771 1.203-1.13l-.026-.06zM506.12 18.636l-1.08-2.45a.452.452 0 0 1 .101-.058.619.619 0 0 1 .114-.067l.135-.06c.039-.017.104-.043.196-.076.091-.037.166-.064.223-.079l2.541 5.763c-.07.052-.141.09-.211.12l-.187.083a2.721 2.721 0 0 1-.371.137l-1.08-2.45-8.046 3.552a1.417 1.417 0 0 1-.123-.217l-.09-.205a6.737 6.737 0 0 1-.1-.24 1.812 1.812 0 0 1-.068-.201l8.046-3.552zM509.385 23.956l1.95 4.421a1.76 1.76 0 0 1-.178.099c-.067.036-.126.062-.174.083a3.61 3.61 0 0 1-.254.106 1.084 1.084 0 0 1-.164.052l-1.585-3.595-3.112 1.373 1.374 3.117a.895.895 0 0 1-.183.108l-.182.08c-.07.031-.135.06-.193.078-.06.024-.119.043-.178.06l-1.374-3.118-3.473 1.534 1.585 3.595a1.088 1.088 0 0 1-.178.105l-.162.072c-.07.03-.14.062-.207.084a1.423 1.423 0 0 1-.178.059l-1.95-4.422 8.816-3.891zM512.589 31.223l1.286 2.917c.134.303.18.634.138.987a3.371 3.371 0 0 1-.293 1.012c-.151.325-.34.615-.57.874-.228.258-.465.44-.706.546-.17.075-.377.123-.622.137a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.459c-.364.374-.687.718-.974 1.029-.284.312-.55.61-.798.89s-.48.557-.7.831c-.217.274-.443.557-.672.856a4.114 4.114 0 0 1-.216-.27c-.054-.076-.113-.164-.18-.262a1.82 1.82 0 0 1-.166-.294c.313-.39.642-.782.987-1.175.296-.345.633-.724 1.016-1.144.38-.42.78-.833 1.192-1.24l-.864-1.96-3.929 1.735a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.99 1.99 0 0 1-.074-.212l8.816-3.891zm-2.916 4.632c.083.188.224.35.42.483.2.136.418.241.648.317.232.071.467.111.708.119.24.004.442-.028.605-.1.179-.079.345-.21.503-.39.157-.182.286-.383.39-.603.102-.222.165-.45.191-.687a1.193 1.193 0 0 0-.084-.631l-.87-1.972-3.38 1.493.87 1.97zM507.812 44.274a1.277 1.277 0 0 1-.115-.2l-.081-.185c-.039-.087-.073-.172-.108-.26a1.991 1.991 0 0 1-.076-.218l8.815-3.891c.036.058.073.128.112.208a3.395 3.395 0 0 1 .195.442c.03.077.055.147.073.212l-8.815 3.892zM516.065 47c.43-.494.77-.885 1.023-1.168.25-.28.443-.49.568-.622.154-.158.25-.25.294-.28l-.026-.059-8.239 3.65a2.39 2.39 0 0 1-.112-.207c-.039-.08-.07-.144-.09-.191a6.737 6.737 0 0 1-.1-.24 1.477 1.477 0 0 1-.063-.19l8.815-3.892c.075.125.137.244.187.356l.156.356c.1.227.17.393.212.502.043.105.074.191.093.257l-4.74 5.451-1.002 1.141c-.243.275-.428.477-.555.607a2.888 2.888 0 0 1-.27.273l.025.059 8.25-3.659c.036.061.073.129.109.203a3.002 3.002 0 0 1 .185.42c.032.08.056.15.07.206l-8.814 3.892a5.06 5.06 0 0 1-.188-.35c-.053-.106-.104-.22-.16-.347a8.382 8.382 0 0 1-.212-.511c-.04-.116-.076-.211-.098-.285L516.065 47zM516.108 62.871c-.15-.258-.3-.53-.456-.815-.124-.243-.264-.516-.418-.826a19.72 19.72 0 0 1-.45-.953c-.28-.635-.437-1.211-.466-1.724-.03-.509.073-.979.313-1.406.24-.427.62-.822 1.14-1.192.519-.37 1.187-.735 2.004-1.096 2.952-1.303 4.943-.79 5.968 1.534.21.476.351.895.43 1.262.077.364.123.675.132.929.02.298.003.553-.055.763a2.845 2.845 0 0 1-.42-.072 1.443 1.443 0 0 1-.277-.092.78.78 0 0 1-.196-.124c.047-.168.072-.37.069-.603a4.825 4.825 0 0 0-.086-.734 4.666 4.666 0 0 0-.333-1.004 2.961 2.961 0 0 0-.69-.997 2.271 2.271 0 0 0-1.023-.538c-.4-.098-.86-.102-1.38-.02-.52.085-1.106.274-1.758.562-.725.32-1.31.631-1.754.935-.447.304-.77.624-.972.957-.2.336-.29.693-.272 1.074.021.382.132.808.337 1.273.145.327.274.605.385.834a9.277 9.277 0 0 0 .52.958l3.46-1.528-.647-1.47a.614.614 0 0 1 .111-.066c.037-.023.073-.046.113-.063l.126-.056c.047-.021.11-.045.184-.075.075-.026.142-.05.202-.065l1.012 2.296-4.853 2.142zM521.841 76.093l.318-.635c-.748-.416-1.305-1.036-1.673-1.87-.388-.88-.453-1.718-.192-2.512.26-.79.784-1.363 1.573-1.711 1.298-.574 2.482-.277 3.549.892.52-.685 1.007-1.128 1.464-1.329.495-.219 1.005-.206 1.522.04.518.243.904.649 1.155 1.217.24.546.277 1.069.115 1.565-.165.498-.493.853-.989 1.072-.842.372-1.848.077-3.013-.881a18.673 18.673 0 0 0-1.935 3.216c.653.123 1.44-.017 2.358-.422l.418-.191.492 1.117c-1.245.55-2.481.65-3.714.305a12.118 12.118 0 0 0-.744 1.724l-.704-1.597zm.752-1.412a28.372 28.372 0 0 1 2.325-3.75c-.734-.723-1.496-.912-2.282-.564a2.293 2.293 0 0 0-1.252 1.278 2.162 2.162 0 0 0 .024 1.753c.234.529.63.956 1.185 1.283zm3.607-3.466c.725.644 1.391.828 2.001.559.585-.259.748-.678.49-1.264-.255-.576-.676-.735-1.263-.476-.387.17-.797.566-1.228 1.181zM533.811 79.356l1.338 3.036c.12.272.16.565.12.887-.04.319-.148.634-.323.942-.174.311-.41.6-.709.872a3.86 3.86 0 0 1-1.053.675 3.576 3.576 0 0 1-1.15.297 3.505 3.505 0 0 1-1.11-.068 2.609 2.609 0 0 1-.918-.394 1.615 1.615 0 0 1-.582-.683l-.973-2.207-3.09 1.364a2.32 2.32 0 0 1-.1-.18c-.03-.06-.058-.118-.081-.171a7.92 7.92 0 0 1-.106-.255 2.39 2.39 0 0 1-.078-.223l8.815-3.892zm-3.766 5.008c.089.202.229.368.42.498.19.13.414.218.667.263.252.047.524.05.81.01.291-.037.576-.12.856-.243.302-.134.569-.295.796-.485.228-.188.406-.39.536-.605a1.74 1.74 0 0 0 .236-.663c.03-.227-.001-.44-.09-.643l-.87-1.97-4.23 1.867.869 1.971zM530.581 95.977a9.376 9.376 0 0 1-.123-.294 2.981 2.981 0 0 1-.087-.243c.414-.266.828-.549 1.25-.85l1.232-.884-1.44-3.268c-.484.103-.98.208-1.482.32-.505.112-.991.23-1.467.356a1.482 1.482 0 0 1-.09-.171 1.181 1.181 0 0 1-.082-.158l-.073-.165c-.02-.045-.039-.097-.06-.154a1.746 1.746 0 0 1-.056-.17c1.605-.41 3.018-.716 4.245-.913a44.45 44.45 0 0 1 3.1-.406c.984-.09 1.832-.13 2.55-.122.066.102.119.199.16.291l.118.27c.035.078.063.149.087.218.026.069.048.126.07.174.017.055.033.106.05.145a31.595 31.595 0 0 1-1.945 1.875 50.197 50.197 0 0 1-2.412 2.012 55.932 55.932 0 0 1-3.384 2.44 2.325 2.325 0 0 1-.091-.16c-.025-.05-.049-.096-.07-.143zm6.964-6.323c-.52.026-1.068.064-1.65.116a35.515 35.515 0 0 0-3.694.53l1.28 2.905a27.13 27.13 0 0 0 1.588-1.237c.494-.418.927-.794 1.299-1.125.431-.395.83-.771 1.203-1.13l-.026-.059zM540.736 95.063l1.285 2.915c.135.306.18.634.138.987a3.371 3.371 0 0 1-.293 1.012 3.674 3.674 0 0 1-.57.874c-.228.258-.464.442-.705.549-.17.075-.378.12-.623.134a3.366 3.366 0 0 1-.774-.05 3.922 3.922 0 0 1-.825-.24 3.35 3.35 0 0 1-.78-.46c-.363.375-.687.719-.973 1.032-.285.31-.551.608-.799.888-.247.28-.48.557-.7.831-.217.273-.442.56-.672.856a4.404 4.404 0 0 1-.215-.267l-.18-.265a1.82 1.82 0 0 1-.167-.294c.313-.39.642-.782.987-1.175.296-.345.633-.725 1.016-1.145.38-.418.78-.832 1.192-1.238l-.864-1.96-3.929 1.734a3.053 3.053 0 0 1-.187-.363c-.038-.086-.07-.169-.105-.254a1.87 1.87 0 0 1-.072-.21l8.815-3.89zm-2.915 4.633c.081.184.223.346.42.483.199.133.416.238.646.314.232.071.469.114.708.119.24.004.442-.028.605-.1.179-.08.345-.21.503-.39.158-.18.286-.383.39-.603.102-.223.165-.451.193-.684a1.21 1.21 0 0 0-.085-.632l-.87-1.974-3.38 1.492.87 1.975zM544.195 104.994l-1.08-2.45a.446.446 0 0 1 .1-.061.619.619 0 0 1 .115-.065l.135-.059.195-.08c.092-.033.168-.06.224-.075l2.541 5.763c-.072.048-.14.089-.21.12l-.188.083a5.178 5.178 0 0 1-.213.087 1.038 1.038 0 0 1-.158.05l-1.08-2.45-8.046 3.551a1.417 1.417 0 0 1-.123-.217l-.09-.204a6.904 6.904 0 0 1-.1-.243 1.815 1.815 0 0 1-.068-.198l8.046-3.552zM548.448 112.426c.16.364.265.713.312 1.04.047.327.063.615.053.864-.009.291-.05.56-.117.804-.214 0-.512-.115-.891-.346.061-.194.1-.402.113-.622a3.568 3.568 0 0 0-.007-.653 2.458 2.458 0 0 0-.21-.757c-.285-.647-.615-1.046-.988-1.203-.376-.155-.834-.11-1.377.13-.345.152-.591.328-.743.529a1.345 1.345 0 0 0-.273.662 2.32 2.32 0 0 0 .045.763c.057.266.12.543.192.829.075.3.139.61.187.934.05.323.034.637-.044.946a2.09 2.09 0 0 1-.48.881c-.245.279-.61.527-1.1.743-.437.193-.839.29-1.207.295a2.074 2.074 0 0 1-1.019-.24 2.674 2.674 0 0 1-.842-.728 5.26 5.26 0 0 1-.679-1.159c-.185-.42-.3-.804-.34-1.15a4.478 4.478 0 0 1-.035-.899c.025-.299.082-.571.17-.814.093.022.198.056.311.1.089.035.185.079.29.13.107.05.204.11.293.185a2.32 2.32 0 0 0-.167.629c-.026.199-.028.42-.005.671.024.25.098.526.228.82.312.708.685 1.159 1.12 1.351.435.197.93.169 1.49-.079.364-.16.632-.349.794-.564a1.46 1.46 0 0 0 .299-.704c.032-.252.019-.517-.041-.798-.057-.28-.124-.568-.196-.86a7.6 7.6 0 0 1-.18-.91 2.546 2.546 0 0 1 .039-.905 1.98 1.98 0 0 1 .436-.831c.219-.26.556-.49 1.006-.689.42-.185.807-.279 1.163-.282.355-.006.682.067.98.213.297.15.566.366.801.65.237.286.444.627.62 1.024z"
                fill="#707070" fill-rule="nonzero" />
            <path d="M3181 719l29-13" fill="none" stroke="#fff" stroke-width="8.02"
                transform="matrix(.4417 0 0 .44199 -911.014 -195.384)" />
            </svg>
    </div>
</section>

SCSS：

#race-event-overview {
    position: relative;
    height: 500px;
    background: #242D33;

    .race-track-map {
        position: absolute;
        top: 75px;
        right: 0;

        svg {
            height: 350px;
            width: 560px;
        }
    }
}

JS：

var path = anime.path('.race-track .track');

anime({
    targets: '.race-track .ball',
    translateX: path('x'),
    translateY: path('y'),
    rotate: path('angle'),
    easing: 'linear',
    duration: 9490, // fastest lap on course
    loop: true
});

Answer 1

我想我为时已晚，不能对您有用，但是：

tl; dr

整个问题是，转换原点在SVG中被破坏了，anime.js是一个简单的工具。要解决此问题，您必须将动画对象（圆）放置到 cx="0" cy="0"上，并删除路径上的所有变换。

AnimeJS运动路径-使元素遵循SVG路径会产生不良结果

1 个答案:

tl; dr

更多信息