진보적 채우기

가 나는 SVG 로고를 가지고 있고 그것이 내가 이것을 사용하려고했습니다진보적 채우기

오른쪽에서 왼쪽으로 역순으로 다음 왼쪽에서 오른쪽으로 진보적 채우기 indefintely 애니메이션을 필요로하고 있지만, 성공하지 못했습니다.

  <linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="100%"> 
       <stop offset="0%" stop-color="#808080"> 
        <animate attributeName="stop-color" values="#808080; #FFFFFF" dur="1s" fill="freeze" repeatCount="indefinite" /> 
       </stop> 
       <stop offset="100%" stop-color="#FFFFFF"> 
        <animate attributeName="stop-color" values="#FFFFFF; #808080" dur="1s" fill="freeze" begin="1s" repeatCount="indefinite" /> 
       </stop> 
      </linearGradient> 
      <symbol viewBox="0 0 320 320" id="logo" fill="url(#lightGradient)">

어떤 제안이 있습니까?

감사합니다.

출처

2017-01-05 Bouki

이와같이? 그것은 귀하의 요구 사항에 따라 다시 왼쪽에서 오른쪽으로 그리고 다시 애니메이션.

<svg> 
 
    <defs> 
 
    <linearGradient id="lightGradient" x1="0%" y1="0%" x2="100%" y2="0%"> 
 
       <stop offset="0%" stop-color="#808080"> 
 
        <animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" /> 
 
       </stop> 
 
       <stop offset="0%" stop-color="#FFFFFF"> 
 
        <animate attributeName="offset" values="0%; 100%; 100%; 0%" dur="1s" repeatCount="indefinite" /> 
 
       </stop> 
 
      </linearGradient> 
 
    </defs> 
 
    <rect width="100%" height="100%" fill="url(#lightGradient)"/> 
 
</svg>

출처

2017-01-05 22:37:59

우수한 그것은에 "휴지"가 측면을 변경하기 전에 애니메이션 가능한가? – Bouki

이번에 업데이트했는데, 다른 새로운 기능이나 다른 기능이 있으면 가장 새로운 질문을하십시오. –

대단히 감사합니다. – Bouki

진보적 채우기

답변

관련 문제