Question

我有这段代码：

<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”。当你有另一个像<circle> or <rect>这样的元素时，就会使用Pathformer.js，为什么它会显示那个错误呢？

Answer 1

尝试声明所有选项，然后在callBack和新的Vivus旁边：

const options = {
            duration: 200
          };

    cb (){}


    new Vivus("svgId", options, cb);

Answer 2

也许你忘了将pathformer.js（你会发现它here）和vivus.js包含在你的HTML中吗？

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

使用vivus.js时“未定义Pathformer”

2 个答案: