使用::after伪元素实现SVG内部闪光动画的技术求助

要实现闪光仅在SVG图标区域显示、不溢出到黑色父容器背景的需求，核心思路是把闪光元素嵌入SVG内部，并利用SVG的遮罩（mask）功能限制其显示范围——父div的伪元素属于DOM层级，无法被SVG形状裁剪，所以必须舍弃原方案。

修改后的完整代码 #

CSS 部分

.svg-icon {
  position: relative;
  background-color: black;
  max-width: 100px;
}

@keyframes shimmer {
  0% {
    transform: translateX(-200px) rotate(30deg);
  }
  100% {
    transform: translateX(600px) rotate(30deg);
  }
}

HTML 部分

<div class="svg-icon">
<svg
  version="1.1"
  id="Layer_1"
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  x="0px"
  y="0px"
  viewBox="0 0 512.001 512.001"
  xml:space="preserve"
>
  <!-- 定义遮罩：仅保留SVG图标的显示区域 -->
  <mask id="iconMask">
    <!-- 白色背景作为基础可显示区域 -->
    <rect width="100%" height="100%" fill="white"/>
    <!-- 黑色填充原图标形状，遮罩中黑色区域会隐藏内容 -->
    <g>
      <path style="fill:black;" d="M256.955,0.05l-71.56,458.945L12.069,482.63c-8.631,1.177-14.926-7.971-10.743-15.611L256.955,0.05z"/>
      <path style="fill:black;" d="M256.955,0.05l78.48,458.945l164.43,23.49c8.639,1.235,14.992-7.906,10.825-15.573L256.955,0.05z"/>
    </g>
    <polygon style="fill:black;" points="256.955,0.05 256.955,511.951 335.434,458.996 "/>
    <polygon style="fill:black;" points="256.955,0.05 185.394,458.996 256.955,511.951 "/>
  </mask>

  <!-- 原SVG图标内容 -->
  <g>
    <path style="fill:#FFC855;" d="M256.955,0.05l-71.56,458.945L12.069,482.63c-8.631,1.177-14.926-7.971-10.743-15.611L256.955,0.05z"/>
    <path style="fill:#FFC855;" d="M256.955,0.05l78.48,458.945l164.43,23.49c8.639,1.235,14.992-7.906,10.825-15.573L256.955,0.05z"/>
  </g>
  <polygon style="fill:#FAAF50;" points="256.955,0.05 256.955,511.951 335.434,458.996 "/>
  <polygon style="fill:#FFE182;" points="256.955,0.05 185.394,458.996 256.955,511.951 "/>

  <!-- 闪光元素：绑定遮罩，仅在图标区域显示 -->
  <rect 
    x="-200" 
    y="-50" 
    width="60" 
    height="600" 
    fill="rgba(255,255,255,0.7)"
    style="mask: url(#iconMask); animation: shimmer 5s ease-in-out 1s infinite;"
  />
</svg>
</div>

关键修改说明 #

1. 移除父div的::after伪元素：原伪元素是DOM层面的元素，无法被SVG的复杂形状裁剪，会直接覆盖黑色背景，因此必须替换。
2. 添加SVG遮罩（mask）：通过<mask>定义了和图标完全匹配的显示范围，遮罩规则是「白色区域允许显示内容，黑色区域隐藏内容」，确保闪光只在图标可见部分出现。
3. 内置闪光元素：用<rect>作为闪光载体，设置半透明白色模拟闪光质感，通过mask: url(#iconMask)绑定遮罩，再用transform实现斜向移动的动画效果，比单纯修改left属性更流畅自然。

内容的提问来源于stack exchange，提问作者horsetail-17