如何在Node.js+JavaScript项目中引入kanjivganimate实现汉字动画

1. 正确引入kanjivganimate库 #

kanjivganimate是前端浏览器端运行的库，后端app.js里用require完全无效，前端script.js直接用require也会报错（除非用webpack这类打包工具），最简单的解决方法是直接在EJS模板里通过CDN或本地文件引入：

方式一：CDN引入（推荐）

在EJS模板里，把kanjivganimate的脚本放在script.js之前引入：

<body>
    <h1>KanjiVG Animation</h1>
    <svg id="kanji-svg" class="kanjiVG" width="300" height="300">
        <!-- SVGs will get loaded by script.js here  -->
    </svg>
    <!-- 先引入kanjivganimate库 -->
    <script src="https://cdn.jsdelivr.net/npm/kanjivganimate@1.2.0/dist/kanjivganimate.min.js"></script>
    <script src="script.js"></script>
</body>

方式二：本地引入

如果不想用CDN，下载kanjivganimate编译好的kanjivganimate.min.js文件，放到项目public/js目录下，然后在EJS里引入：

<script src="/js/kanjivganimate.min.js"></script>
<script src="script.js"></script>

2. 调整KanjivgAnimate实例化时机 #

你当前代码里，new KanjivgAnimate('.kanjiVG')是在SVG内容还未加载完成时执行的，此时SVG内部的路径元素还不存在，库无法找到要动画的目标。必须把实例化代码移到fetch成功回调的内部，也就是SVG内容插入DOM之后：

修改后的script.js：

window.onload = function() {
    const kanjiSVG = document.getElementById('kanji-svg');
    const kanjiCharacter = '好'; 

    var charCode = kanjiCharacter.charCodeAt(0).toString(16);
    while (charCode.length < 5) charCode = "0" + charCode;

    fetch(`/kanjivg/${charCode}.svg`)
        .then(response => response.text())
        .then(svgText => {
            kanjiSVG.innerHTML = svgText;
            
            // SVG内容已插入DOM，此时实例化动画库
            const kanjiAnim = new KanjivgAnimate('.kanjiVG');
            // 直接调用play方法启动动画
            kanjiAnim.play();
        })
        .catch(error => {
            console.error('Error fetching SVG:', error);
        });
};

3. 额外优化（可选） #

如果需要手动控制动画（暂停、重播等），可以把kanjiAnim变量提升到合适的作用域，再绑定按钮事件：

// 全局作用域定义变量，方便后续控制
let kanjiAnim;

window.onload = function() {
    const kanjiSVG = document.getElementById('kanji-svg');
    const kanjiCharacter = '好'; 

    var charCode = kanjiCharacter.charCodeAt(0).toString(16);
    while (charCode.length < 5) charCode = "0" + charCode;

    fetch(`/kanjivg/${charCode}.svg`)
        .then(response => response.text())
        .then(svgText => {
            kanjiSVG.innerHTML = svgText;
            kanjiAnim = new KanjivgAnimate('.kanjiVG');
        })
        .catch(error => {
            console.error('Error fetching SVG:', error);
        });
};

// 绑定按钮事件示例
function playAnimation() {
    if (kanjiAnim) kanjiAnim.play();
}

function resetAnimation() {
    if (kanjiAnim) kanjiAnim.reset();
}

关键注意点 #

• 确保KanjiVG的SVG文件结构合规：路径元素带有stroke-order属性（官方KanjiVG SVG默认符合要求）
• 实例化时的选择器要和模板里的SVG类名一致：.kanjiVG对应你定义的SVG类
• 本地库要确保静态文件服务正常：你的app.use(express.static(path.join(__dirname, 'public')))已经能正确访问public下的文件

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