从页面外为 SVG 设置动画答案

【问题标题】：Animating SVG from off the page从页面外为 SVG 设置动画
【发布时间】：2018-06-30 01:31:32
【问题描述】：

我对我想做的动画有一个愿景，但作为 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'
});

任何帮助或建议将不胜感激！

【问题讨论】：

标签： javascript css animation svg anime.js

【解决方案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

【讨论】：

如此简单！非常感谢！还有一种方法可以确保进入的部分直到它们应该出现时才被看到？现在他们开始在适当的位置，然后出去和进来。如果我将他们的不透明度设置为 0，那么当动画结束时，他们会回到不可见状态。
有很多解决方案。例如，(1) 更改 SVG，使元素从您想要的位置开始。 (2) 以 SVG 不可见开始，然后在动画开始时使其可见。