如何初始隐藏SVG并仍可通过Anime.js恢复为opacity:1状态？

要实现这个需求，核心是初始隐藏时不能让SVG脱离渲染树（比如display:none就不行，Anime.js没法对这类元素做动画），下面是几种实用且靠谱的方案：

方案1：用CSS类批量控制初始隐藏 #

这种方式适合需要统一处理多个SVG，或者想把样式和结构分离的场景：

首先给目标SVG添加自定义类（比如svg-hidden）：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" class="svg-hidden">
  <path style="fill:#1E201D;" d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.4..."/>
</svg>

然后在CSS里定义这个类的初始状态：

.svg-hidden {
  opacity: 0;
  /* 可选：如果想让初始状态完全不占空间，可以额外加transform: scale(0)，动画时记得同步恢复这个属性 */
  /* transform: scale(0); */
}

最后用Anime.js选中目标SVG，动画到opacity:1：

anime({
  targets: '#Capa_1', // 也可以用.svg-hidden选择器批量处理
  opacity: 1,
  duration: 1000, // 动画时长，单位毫秒
  easing: 'easeOutQuad' // 缓动函数，按需选择
});

方案2：内联样式直接设置初始隐藏 #

如果只是单个SVG需要处理，直接写内联样式更简洁，不用额外加CSS类：

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 31.49 31.49" style="opacity: 0;">
  <path style="fill:#1E201D;" d="M21.205,5.007c-0.429-0.444-1.143-0.444-1.587,0c-0.429,0.429-0.429,1.143,0,1.571l8.047,8.047H1.111 C0.492,14.626,0,15.118,0,15.737c0,0.619,0.492,1.127,1.111,1.127h26.554l-8.047,8.032c-0.429,0.444-0.4..."/>
</svg>

对应的Anime.js代码和方案1一致：

anime({
  targets: '#Capa_1',
  opacity: 1,
  duration: 1000,
  easing: 'easeInOutSine'
});

避坑关键提醒 #

• 绝对不要用display: none初始隐藏！设置display: none的元素会脱离渲染树，Anime.js无法读取和修改它的样式属性，动画完全不会生效。
• 尽量不用visibility: hidden：虽然元素还在渲染树里，但它的子元素也会被强制隐藏，而且动画opacity时，元素的点击区域依然存在，大概率不是你想要的效果，优先选opacity: 0。

内容的提问来源于stack exchange，提问作者sebastian alexander