如何实现SVG从左上角到右下角的动画效果，与指定gif动效一致

你现在的代码使用的是填充色整体淡入逻辑，无法实现从左上到右下的扫描式显现效果，我们可以通过CSS遮罩（mask）实现对角线扫过的动效，修改方案如下： #

修改后的完整CSS代码 #

body {
  background: black
}

path {
  fill: white;
}

.svg-wrapper svg {
  /* 定义135度线性渐变遮罩，对应左上到右下的对角线方向 */
  mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
  mask-size: 250% 250%;
  /* 初始遮罩位置：透明段完全覆盖SVG，字母隐藏 */
  mask-position: 100% 100%;
  /* 兼容Webkit内核浏览器 */
  -webkit-mask-image: linear-gradient(135deg, #000 50%, transparent 50%);
  -webkit-mask-size: 250% 250%;
  -webkit-mask-position: 100% 100%;
  /* 遮罩位置过渡时长，可按需调整动画速度 */
  transition: mask-position 1s ease, -webkit-mask-position 1s ease;
}

/* hover时遮罩移动，不透明段从左上向右下扫过，字母逐步显示 */
.svg-wrapper:hover svg {
  mask-position: 0% 0%;
  -webkit-mask-position: 0% 0%;
}

HTML代码无需修改，保持原有代码即可。 #

实现原理 #

• 135度的线性渐变遮罩刚好匹配左上到右下的扫描方向，渐变前半段不透明（显示内容）、后半段透明（隐藏内容）
• 遮罩尺寸设为250%，保证渐变的黑白分界可以完整扫过整个SVG区域
• 动画过程中分界斜向移动，扫到的区域字母就会显现，完全匹配目标动效

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