从页面外动画 SVG

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

Animating SVG from off the page

javascript

css

animation

svg

anime.js