I have been using ::after pseudo-element to create a shining effect on all of my divs, and I need to implement the same approach to an SVG icon. But with SVGs, I need the animation to be just within the SVG and not on its parent container. Can anyone please help?

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

.svg-icon::after {
  position: absolute;
  width: 5px;
  height: 150px;
  left: -200px;

  background: white;

  animation: shimmer 5s ease-in-out 1s infinite;
  content: '';
}

@keyframes shimmer {
  100% {
    left: 200px;
  }
}

<div >
<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"
  style="enable-background:new 0 0 512.001 512.001;"
  xml:space="preserve"
>
  <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 "
  />
</svg>
</div>

Basically, I need the shining white line to not be visible on the black background. Thanks in advance.

CodePudding user response：

css

.preloader {
  position: fixed;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 30%;
  height: 25vh;
  background: black;
}


.logo {
  display: none;
}

.wrapper {
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 60%;
}

/* Make the gradient visible only on hover*/
linearGradient {
  display: none;
}
path {
  fill: #FFC855;
}
polygon {
  fill: #FFC855;
}
svg linearGradient {
  display: initial;
}
svg path {
  fill: url(#linear-gradient);
}
svg g {
  fill: url(#linear-gradient);
}
svg polygon {
  fill: url(#linear-gradient);
}
/**/

html

<div >
  <span >
    <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"
      style="enable-background:new 0 0 512.001 512.001;"
      xml:space="preserve"
    >
      <defs>
        <linearGradient
          id="linear-gradient"
          x1="-100%"
          y1="100%"
          x2="800%"
          y2="0"
        >
          <stop offset="0" stop-color="#FFC855">
            <animate
              attributeName="offset"
              values="0;0.8"
              dur="1s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="0" stop-color="#FFC855">
            <animate
              attributeName="offset"
              values="0;0.8"
              dur="2s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="0.1" stop-color="white">
            <animate
              attributeName="offset"
              values="0.1;1"
              dur="2s"
              repeatCount="indefinite"
            />
          </stop>
          <stop offset="0.1" stop-color="#FFC855">
            <animate
              attributeName="offset"
              values="0.1;1"
              dur="2s"
              repeatCount="indefinite"
            />
          </stop>
        </linearGradient>
      </defs>
      <g fill="url(#linear-gradient)">
        <path
          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
          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"
        />

        <polygon points="256.955,0.05 256.955,511.951 335.434,458.996 " />
        <polygon points="256.955,0.05 185.394,458.996 256.955,511.951 " />
      </g>
    </svg>
  </span>
</div>

I hope it helps you