我使用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但在本地我在控制台中有这个错误:
我已经尝试连接snap svg throgh clodflare,将它放在页脚中,在doc ready函数中包装代码。但没有任何作用。
答案 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);