[英]snap svg animation unwanted cropping
我有一个用snap-mina.elastic动画的svg。 由于这个动画的本质,我动画的路径超出了svg的大小并裁剪了形状。 我想看看整个路径动画的拉伸。
这是HTML
<svg width="130px" height="113px" viewBox="0 0 130 113" id="svg">
</svg>
CSS
body{
text-align: center;
padding: 2em;
background-color: #07AD91;
}
JS
s = Snap("#svg");
var firstShape = s.path("M119.297,113L119.297,113v-11.488H130l0,0V113H119.297z").attr({
fill: "#07AD91"
});
var secondShape = s.path("M0,11.488L0,11.488V0h10.703l0,0v11.488H0z").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" }, 9000, mina.elastic);
secondShape.animate({ d: "M130,91.641H49.094l11.094-16.658h38.5L56.472,0h20.471l42.236,72.818L130,91.641z" fill:"#97E8DA" }, 9000, mina.elastic);
这是CODEPEN
我已经尝试过放大svg的高度和宽度但是然后路径保持在左上方并在那里裁剪。
我刚刚将这个添加到css来解决我的问题
#svg{
overflow: visible;
}
我一直在努力解决这个问题。 我发现这个css选择器会覆盖溢出:隐藏在Chrome和Firefox中的SVG元素。
svg:not(:root) {
overflow: visible !important;
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.