snap svg 动画不需要的裁剪答案

【问题标题】：snap svg animation unwanted croppingsnap svg 动画不需要的裁剪
【发布时间】：2015-04-30 09:13:52
【问题描述】：

我有一个带有 snap 动画的 svg - mina.elastic。由于这个动画的性质，我制作动画的路径超出了 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;
}

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 的高度和宽度，但路径仍停留在左上方并在那里裁剪。

【问题讨论】：

标签： javascript css animation svg snap.svg

【解决方案1】：

我刚刚将此添加到 css 以解决我的问题

#svg{
  overflow: visible;
}

【讨论】：

【解决方案2】：

我一直在努力解决这个问题。我发现这个 css 选择器覆盖了溢出：Chrome 和 Firefox 中 SVG 元素的隐藏。

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

【讨论】：

您好，非常感谢您的回答。我没有溢出问题：在我的#svg id 上可见。至少在我正在运行的 Chrome 和 firefox 版本上。但是，我在 iOS 裁剪我的动画时仍然遇到问题。我已经尝试了您的解决方案，但仍然不满意。