"Pathformer未定义“;使用vivus.js时

"Pathformer is not defined" when using vivus.js

本文关键字：vivus js 使用 未定义 quot Pathformer      更新时间：2023-09-26

我有这个代码：

<svg version="1.1" width="200" height="210" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 511 511" xmlns:xlink="http://www.w3.org/1999/xlink" id="my-svg">
    <path d="M399.5,0h-288C89.72,0,72,17.72,72,39.5v432c0,21.78,17.72,39.5,39.5,39.5h288c21.78,0,39.5-17.72,39.5-39.5v-432   C439,17.72,421.28,0,399.5,0z M424,471.5c0,13.509-10.991,24.5-24.5,24.5h-288C97.991,496,87,485.009,87,471.5v-432   C87,25.991,97.991,15,111.5,15h288c13.509,0,24.5,10.991,24.5,24.5V471.5z" stroke="#000" stroke-width="4px" fill="none"/>
    <path d="m373.5,64h-236c-5.238,0-9.5,4.262-9.5,9.5v76c0,5.238 4.262,9.5 9.5,9.5h236c5.238,0 9.5-4.262 9.5-9.5v-76c0-5.238-4.262-9.5-9.5-9.5zm-5.5,80h-225v-65h225v65z" stroke="#000" stroke-width="4px" fill="none"/>
    <path d="m373.5,192h-236c-5.238,0-9.5,4.262-9.5,9.5v236c0,5.238 4.262,9.5 9.5,9.5h236c5.238,0 9.5-4.262 9.5-9.5v-236c0-5.238-4.262-9.5-9.5-9.5zm-150.5,160v-65h65v65h-65zm65,15v65h-65v-65h65zm-145-80h65v65h-65v-65zm80-15v-65h65v65h-65zm80,15h65v65h-65v-65zm65-15h-65v-65h65v65zm-160-65v65h-65v-65h65zm-65,160h65v65h-65v-65zm160,65v-65h65v65h-65z" stroke="#000" stroke-width="4px" fill="none"/>
    <path d="m279.5,127c4.142,0 7.5-3.358 7.5-7.5v-16c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v16c0,4.142 3.358,7.5 7.5,7.5z" stroke="#000" stroke-width="4px" fill="none"/>
    <path d="m311.5,127c4.142,0 7.5-3.358 7.5-7.5v-16c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v16c0,4.142 3.358,7.5 7.5,7.5z" stroke="#000" stroke-width="4px" fill="none"/>
    <path d="m343.5,127c4.142,0 7.5-3.358 7.5-7.5v-16c0-4.142-3.358-7.5-7.5-7.5s-7.5,3.358-7.5,7.5v16c0,4.142 3.358,7.5 7.5,7.5z" stroke="#000" stroke-width="4px" fill="none"/>
</svg>
<script type="text/javascript">
    new Vivus('my-svg', {duration: 200}, myCallback);
    function myCallback(){
        console.log("done");
    }
</script>

它应该按照我的意愿工作，因为它们都是路径，有笔划，没有填充。但控制台显示："未捕获的ReferenceError:Pathformer未定义"。Pathformer.js只是在您有其他元素（如<circle> or <rect>）时使用的，那么它为什么会显示该错误呢？

也许您忘记将pathformer.js（您可以在这里找到）和vivus.js一起包含到html中了？

<script type="text/javascript" src="js/vivus.js">
</script>
<script type="text/javascript" src="js/pathformer.js">
</script>

尝试声明所有选项，然后是回调和新的Vivus:

const options = {
            duration: 200
          };
    cb (){}

    new Vivus("svgId", options, cb);
相关文章：