我试图让一个svg对象跟随一个路径，当我使用下面的代码时，它工作正常：

<svg x="0px" y="0px" viewBox="0 0 600 800">
    <style>
        svg {
            fill: none;
            stroke: black;
        }
        #arrow {
            transform-origin: center;
            transform-box: fill-box;
            animation: followPath 5s infinite;
            offset-path: path("M-54.918,380.7l285.5,0.5l0.5,354.5l173.1-0.1V480.1h181.5");
        }
        @keyframes followPath {
            0% {offset-distance: 100%;}
            100% {offset-distance: 0%;}
        }
    </style>
    <polygon id="arrow" points="574.857,479.816 585.682,473.566 596.507,467.316 596.507,479.816 596.507,492.316 585.682,486.066" />
</svg>

但是当我尝试使用通过url的路径时，我什么也得不到：

<svg x="0px" y="0px" viewBox="0 0 600 800">
    <style>
        svg {
            fill: none;
            stroke: black;
        }
        #arrow {
            transform-origin: center;
            transform-box: fill-box;
            animation: followPath 5s infinite;
            offset-path: url(#guide);
        }
        @keyframes followPath {
            0% {offset-distance: 100%;}
            100% {offset-distance: 0%;}
        }
    </style>
    <path id="guide" d="M-54.918,380.7l285.5,0.5l0.5,354.5l173.1-0.1V480.1h181.5" />
    <polygon id="arrow" points="574.857,479.816 585.682,473.566 596.507,467.316 596.507,479.816 596.507,492.316 585.682,486.066" />
</svg>

必须把路径直接放在元素上对我来说没有好处，我需要引用现有的路径，任何帮助都非常感谢，谢谢。