快照svg动画不需要的裁剪

Question

I have an svg animated with snap - mina.elastic. Due to the nature of this animation the paths I'm animating go beyond the size of the svg and crops the shapes. I want to see the strech of the whole path animation.

here is the HTML

<svg width="130px" height="113px" viewBox="0 0 130 113" id="svg">

</svg>

the 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);

Here is the CODEPEN

I've tried enlarging the svg height and width but then the paths stay top left and crop there.

Answer 1

I just added this to the css to fix my issue

#svg{
  overflow: visible;
}

Answer 2

I've just been working to solve this issue. I found this css selector overrides the overflow:hidden for SVG elements in Chrome and Firefox.

svg:not(:root) {
   overflow: visible !important;
}