如何让SVG中的动画仅在特定区域内可见？

要让白色shine动画只在蓝色箭头内可见，你可以利用SVG的**遮罩（mask）**功能，将动画区域限制为箭头的形状，具体步骤如下：

1. 调整SVG结构，添加遮罩和动画层 #

移除原SVG的shine类，内部新增遮罩定义和带遮罩的动画矩形：

<svg>
  <!-- 定义遮罩：箭头形状的白色填充（mask中白色区域会显示内容，黑色隐藏） -->
  <mask id="arrowMask">
    <polygon fill="white" points='37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3'></polygon>
    <polygon fill="white" points='37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7'></polygon>
    <polygon fill="white" points='37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1'></polygon>
  </mask>

  <!-- 原始蓝色箭头（保持不变） -->
  <polygon fill="blue" class='arrow-top' points='37.6,27.9 1.8,1.3 3.3,0 37.6,25.3 71.9,0 73.7,1.3'></polygon>
  <polygon fill="blue" class='arrow-middle' points='37.6,45.8 0.8,18.7 4.4,16.4 37.6,41.2 71.2,16.4 74.5,18.7'></polygon>
  <polygon fill="blue" class='arrow-bottom' points='37.6,64 0,36.1 5.1,32.8 37.6,56.8 70.4,32.8 75.5,36.1'></polygon>

  <!-- 覆盖整个SVG的动画矩形，通过mask限制仅在箭头区域显示 -->
  <rect width="100%" height="100%" class="shine" mask="url(#arrowMask)" />
</svg>

2. 优化CSS样式 #

移除原样式中的橙色背景（将橙色背景直接设置给SVG），并简化动画代码（去掉-webkit前缀以兼容更多浏览器）：

svg {
  background: orange; /* 设置SVG的橙色背景 */
}

.shine {
  background-image: linear-gradient(-40deg, transparent 0%, transparent 40%, #fff 50%, transparent 60%, transparent 100%);
  background-size: 200%;
  animation: shine 3s infinite;
}

@keyframes shine {
  0% {
    background-position: 150%
  }
  100% {
    background-position: -50%
  }
}

原理说明 #

• 遮罩(<mask>)定义了箭头的形状，只有遮罩内的白色区域会显示上方的动画内容
• 动画矩形覆盖整个SVG，但通过mask="url(#arrowMask)"限制了显示范围，仅箭头区域可见
• 蓝色箭头作为底层元素，动画层在上方叠加，最终实现仅箭头区域有shine效果

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