CSS中offset-path属性使用url()引用SVG路径不生效如何解决

问题原因 #

offset-path: url(#id) 属于SVG运动路径规范的高阶用法，目前部分浏览器对该语法的支持存在缺陷，无法正确识别内部SVG路径的ID引用，才会出现硬编码path()正常、引用ID失效的问题。

解决方案 #

方案1：CSS变量复用路径（纯CSS实现，无需JS） #

把路径字符串定义为CSS变量，需要使用的地方直接调用变量即可，避免重复硬编码：

<svg x="0px" y="0px" viewBox="0 0 600 800">
    <style>
        /* 全局定义路径变量，修改时仅需改此处 */
        :root {
            --guide-path: path("M-54.918,380.7l285.5,0.5l0.5,354.5l173.1-0.1V480.1h181.5");
        }
        svg {
            fill: none;
            stroke: black;
        }
        #guide {
            /* 路径可正常渲染显示 */
            d: var(--guide-path);
        }
        #arrow {
            transform-origin: center;
            transform-box: fill-box;
            animation: followPath 5s infinite;
            /* 直接调用变量作为运动路径 */
            offset-path: var(--guide-path);
        }
        @keyframes followPath {
            0% {offset-distance: 100%;}
            100% {offset-distance: 0%;}
        }
    </style>
    <path id="guide" />
    <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>

这种方案既可以保留页面上的#guide路径元素用于显示，也不需要重复编写路径字符串，维护成本极低。

方案2：JS动态读取路径属性（完全复用已有path元素） #

如果你的路径是动态生成、已经存在于DOM中的path元素，可以用JS读取它的d属性，动态赋值给运动元素的offset-path样式，搭配你原来的SVG代码即可运行：

const guidePath = document.getElementById('guide');
const arrow = document.getElementById('arrow');
arrow.style.offsetPath = `path("${guidePath.getAttribute('d')}")`;

如果需要兼容低版本浏览器，该方案的兼容性更好，覆盖绝大多数支持offset-path的浏览器版本。

内容的提问来源于stack exchange，提问作者Daniel Olarte