Question

我有一个想做动画的愿景，并且是SVG的新手，我不知道如何实现这个目标。基本上，我有一个SVG，有一些非常简单的形状。我希望他们中的一些人能够从页面进入他们所属的地方。

我遇到的问题是，如果我尝试从我想要的方向转换形状，它会移出SVG视口之外，无法看到。
是否可以取一块SVG并在页面的其余部分显示它？
如果没有，是否可以创建一个相同大小和形状的div并设置动画，使其每次都落在正确的位置？
唯一让我担心的是让它最终落在不同设备尺寸的时髦场所。

正如你所看到的，我已经使用anime.js创建了一个动画，可以在viewbox之外对它们进行动画制作，但我认为如果它们可以来自所有方式，那将会非常棒。页。 Here is my codepen

以下是我的动画现在的样子：

var rect4 = anime({
    targets: '.rect-4',
    translateY: '-100%',
    translateX: '100%',
    easing: 'easeInOutQuart',
    duration: 3000,
    delay: 3500,
    direction: 'reverse'
});

非常感谢任何帮助或建议！

Answer 1

是。你可以让溢出可见：

.title
  position: absolute
  top: 25%
  right: 30%
  color: white
  text-align: right
  width: 30%
  overflow: visible

#name-svg 
  width: 120%
  position: absolute
  right: 0%
  overflow: visible

https://codepen.io/PaulLeBeau/pen/BJMVzB

从页面外动画SVG

1 个答案: