WordPress中SVG文本路径JavaScript动画无法运行的求助

问题概述 #

按教程在WordPress上实现SVG文本路径滚动动画，SVG和文本路径可正常显示，但JavaScript驱动的滚动动画完全无效果。页面能看到SVG路径与textPath内容“Testing testing testing”，但滚动页面时文本不会沿路径移动。

当前已添加的代码 #

头部（通过WP Headers and Footers添加） #

<script>
    var textPath = document.querySelector('#text-path');
    
    function updateTextPathOffset(offset) {
        textPath.setAttribute('startOffset', offset);
    }
        
    function onScroll() {
        requestAnimationFrame(function() {
            updateTextPathOffset(window.scrollY * 1.5);
        });
    }
    
    window.addEventListener('scroll', onScroll);
        
</script>

主体内容 #

<svg id="svg-path" xmlns="http://www.w3.org/2000/svg" width="1440" height="3500" xml:space="preserve">
    <path id="our-text" fill="none" stroke="#000" stroke-width="10" stroke-miterlimit="10" d="M1237.52 0v541.86c0 14.27-11.57 25.83-25.83 25.83H415.53c-14.27 0-25.83 11.57-25.83 25.83v365.73c0 14.27 11.57 25.83 25.83 25.83h252.68c14.27 0 25.83 11.57 25.83 25.83v200.51c0 14.27 11.57 25.83 25.83 25.83h339.64c14.27 0 25.83 11.57 25.83 25.83v270.08c0 14.27-11.57 25.83-25.83 25.83H228.57c-14.27 0-25.83 11.57-25.83 25.83v339.64c0 14.27 11.57 25.83 25.83 25.83h609.21c14.27 0 25.83 11.57 25.83 25.83v496.16c0 14.27-11.57 25.83-25.83 25.83H159.01c-14.27 0-25.83 11.57-25.83 25.83v287.47c0 14.27 11.57 25.83 25.83 25.83h1017.9c14.27 0 25.83 11.57 25.83 25.83v291.81c0 14.27-11.57 25.83-25.83 25.83H972.05c-14.27 0-25.83 11.57-25.83 25.83v100.51c0 14.27-11.57 25.83-25.83 25.83H424.22c-14.27 0-25.83 11.57-25.83 25.83V3500"></path>
    <text y="40" font-size="30" font-family="Montserrat, Arial">
        <textPath id="text-path" class="text" href="#our-text" startOffset="500">
            Testing testing testing
        </textPath>
    </text>
</svg>

CSS样式 #

svg#svg-path {max-width:100%; height:auto;}
.animate {animation: reveal 1s forwards;}
@keyframes reveal {
    from {
        opacity:0;
        transform: translateX(-180px);
    }
    to {
        opacity:1;
        transform: translateX(0);
    }
}

修复方案 #

1. 修正脚本执行时机 #

当前脚本放在页面头部，DOM还未加载完成时document.querySelector('#text-path')会返回null，导致后续逻辑失效。需将脚本包裹在DOM加载完成的回调中，或移至</body>标签前：

<script>
document.addEventListener('DOMContentLoaded', function() {
    var textPath = document.querySelector('#text-path');
    
    function updateTextPathOffset(offset) {
        textPath.setAttribute('startOffset', offset);
    }
        
    function onScroll() {
        requestAnimationFrame(function() {
            updateTextPathOffset(window.scrollY * 1.5);
        });
    }
    
    window.addEventListener('scroll', onScroll);
});
</script>

2. 优化路径偏移匹配逻辑 #

当前startOffset初始值与路径实际长度不匹配，滚动时偏移变化可能不明显。可先获取路径总长度，再调整滚动乘数：

// 在DOMContentLoaded回调内添加
var path = document.querySelector('#our-text');
var pathLength = path.getTotalLength();

// 调整滚动乘数，根据实际效果微调（示例为反向滚动）
function onScroll() {
    requestAnimationFrame(function() {
        updateTextPathOffset(pathLength - (window.scrollY * 0.1));
        // 正向滚动可使用：updateTextPathOffset(window.scrollY * 0.1);
    });
}

3. 兼容textPath的href属性 #

部分老浏览器不支持href属性，需补充xlink:href做兼容：

<textPath id="text-path" class="text" href="#our-text" xlink:href="#our-text" startOffset="500">
    Testing testing testing
</textPath>

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