1

我有这个代码：

<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>，那么为什么会显示该错误？

4

2 回答 2

1

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

const options = {
            duration: 200
          };

    cb (){}


    new Vivus("svgId", options, cb);
于 2020-05-14T13:21:36.957 回答
0

也许您忘记将 pathformer.js（您可以在此处找到）与 vivus.js 一起包含到您的 html 中？

<script type="text/javascript" src="js/vivus.js">
</script>
<script type="text/javascript" src="js/pathformer.js">
</script>
于 2016-05-19T10:12:00.720 回答