从页面上动画SVG

Question

我有一个动画的愿景，我想做，并且是新的SVG，我不知道如何实现这一点。基本上，我有一个SVG，有一些非常简单的形状。我想让他们中的几个人从网页上走出来，到他们所在的地方来。

我遇到的问题是，如果我试图从我希望它来自的方向转换一个形状，它就在SVG视口之外，无法被看到。

是否有可能获取SVG的一部分并使其在页面的其余部分可见？

如果没有，是否有可能创建一个大小和形状相同的div，并将其动画化，以便它每次都降落在正确的位置？

唯一让我担心的是，它最终会出现在不同设备大小的古怪地方。

正如您所看到的，我已经有了一个使用anime.js的动画，它可以将它们从viewbox外部动画化，但是我认为如果它们可以从页面以外的所有地方来的话，看起来会非常棒。这是我的密码。

下面是我的动画现在的样子的一个例子：

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