AnimeJS Motion Path - заставляет элемент следовать SVG-пути, давая нежелательный результат

Question

Я пытаюсь заставить оранжевый маркер следовать курсу трассы RC-автомобилей, используя элемент SVG и библиотеку AnimeJS.

Но независимо от того, что я пытаюсь, я получаю действительно странные и нежелательные результаты.

Иногда я вижу маркер, следующий за путем, но путь, по которому он идет, смещен от курса и не в том же масштабе, и некоторые вещи, которые я пробую, вообще не видны, но я вижу полосы прокрутки на своей странице, которые меняются, что указывает, что маркер есть и движется.

Я также могу взглянуть на инструмент проверки браузера и увидеть, что стили элемента быстро меняются - translateX, translateY и rotate.

Код, который я оставил здесь, показывает, что маркер движется. Если вы внимательно посмотрите в демонстрации JSFiddle и подождете 9,49 секунды для завершения каждого круга, вы можете увидеть вспышку оранжевого шара в течение наносекунды, но мяч не масштабируется, и я понятия не имею, по какому пути он идет,

Что я делаю неправильно? Как этого достичь? Я открыт для использования других библиотек или инструментов, если это поможет.

JSFiddle

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" и удалите все преобразования на пути.

Больше информации

Действительно полезная статья о преобразовании SVG находится здесь, в разделе "Уловки CSS". Важная мысль отсюда: преобразование всех элементов внутри svg элемент имеет начало преобразования в верхнем левом углу svgэлемент.

Если вы посмотрите на преобразования, anime.js создает на анимированном элементе, вы увидите точно значения из pathс dатрибут. Эти значения представляют собой количество пикселей от начала координат (снова верхний левый угол svgelement), однако, когда к элементу применено преобразование, он не будет соответствовать. Попробуйте удалить преобразования в файлах SVG