Javascript 从页面外设置SVG动画

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

---

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

是的。您只需将溢出设置为可见即可：

.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

---

太简单了！非常感谢！还有没有一种方法可以确保进来的部分在应该看到之前不会被看到？现在他们开始在位置上，然后出去和进来。如果我将它们的不透明度设置为0，那么当动画结束时，它们将恢复为不可见。有很多解决方案。例如，（1）修改SVG，使元素从您想要的地方开始。（2） 从SVG不可见开始，然后在动画开始时使其可见。