snap svg无法在本地工作

时间:2015-03-03 22:10:46

标签: css animation svg snap.svg

我使用snap svg制作了一个codepen。见HERE

我想将它包含在我使用Kirby CMS和MAMP进行本地开发的网站中

我已经在头部包含了snap svg:

<?php echo js('assets/js/snap.svg-min.js') ?>

并且在我有这个脚本的页脚后关闭body标签:

<script>

      s = Snap("#svg");

      var firstShape = s.path("M125.834,113L125.834,113v-3.625H130l0,0V113H125.834z").attr({
        fill: "#07AD91"
      });


      var secondShape = s.path("M0,3.63L0,3.63V0.004h4.167l0,0V3.63H0z").attr({
        fill: "#07AD91"
      });



      firstShape.animate({ d: "M10.011,112.182L0,94.098l54.068-92.65l40.161,71.15H73.607L53.62,37.577L10.011,112.182z;" fill:"#46CEB4" }, 2500, mina.elastic);

      secondShape.animate({ d: "M130,91.641H49.094l11.094-16.658h38.5L56.472,0h20.471l42.236,72.818L130,91.641z" fill:"#97E8DA" }, 2500, mina.elastic);

    </script>

它适用于codepen但在本地我在控制台中有这个错误:

console screenshot

我已经尝试连接snap svg throgh clodflare,将它放在页脚中,在doc ready函数中包装代码。但没有任何作用。

1 个答案:

答案 0 :(得分:1)

fill:"#46CEB4"之前缺少逗号,代码应为:

firstShape.animate({ d: "M10.011,112.182L0,94.098l54.068-92.65l40.161,71.15H73.607L53.62,37.577L10.011,112.182z;", fill:"#46CEB4" }, 2500, mina.elastic);

secondShape.animate({ d: "M130,91.641H49.094l11.094-16.658h38.5L56.472,0h20.471l42.236,72.818L130,91.641z", fill:"#97E8DA" }, 2500, mina.elastic);