테스트 사이트 - 개발 중인 베타 버전입니다

svg 코드좀 봐주세요 채택완료

smltree 3년 전 조회 2,293

아래 소스는 path 두개가 번갈아 가면서 나오는 svg소스입니다. 지금은 하나가 나오고 페이드아웃되면서 다음것이 페이드인되는데요 원하는것은 "페이드아웃이 아니고 그냥 딱! 나오고 3초 다음것이 딱! 나오고 3초 이렇게 계속 번갈아가면서 나오기" 를 원합니다. 페이드 아웃보다 쉬울것 같은데 잘 안되네요 고수님들의 소스수정 부탁드립니다.

 

</p>

<p><code><?</code><code>xml</code> <code>version</code><code>=</code><code>"1.0"</code> <code>encoding</code><code>=</code><code>"utf-8"</code><code>?></code></p>

<p><code><!-- Generator: Adobe Illustrator 26.0.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  --></code></p>

<p><code><</code><code>svg</code> <code>version</code><code>=</code><code>"1.1"</code>  <code>xmlns</code><code>=</code><code>"<a href="<a href="http://www.w3.org/2000/svg" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg</a>"><a href="http://www.w3.org/2000/svg" target="_blank" rel="noopener noreferrer">http://www.w3.org/2000/svg</a></a>"</code> <code>xmlns:xlink</code><code>=</code><code>"<a href="<a href="http://www.w3.org/1999/xlink" target="_blank" rel="noopener noreferrer">http://www.w3.org/1999/xlink</a>"><a href="http://www.w3.org/1999/xlink" target="_blank" rel="noopener noreferrer">http://www.w3.org/1999/xlink</a></a>"</code> <code>x</code><code>=</code><code>"0px"</code></p>

<p><code>   </code><code>y</code><code>=</code><code>"0px"</code> <code>viewBox</code><code>=</code><code>"0 0 120 45"</code> <code>style</code><code>=</code><code>"enable-background:new 0 0 120 45;"</code> <code>xml:space</code><code>=</code><code>"preserve"</code>  <code>width</code><code>=</code><code>"120"</code> <code>height</code><code>=</code><code>"45"</code><code>></code></p>

<p> </p>

<p> </p>

<p><code><</code><code>g</code><code>></code></p>

<p><code><</code><code>rect</code> <code>width</code><code>=</code><code>"120"</code> <code>height</code><code>=</code><code>"45"</code> <code>style</code><code>=</code><code>"fill:#FFFFFF;stroke-width:1;stroke:#c4c4c4;"</code> <code>/></code></p>

<p><code><</code><code>path</code> <code>d</code><code>=</code><code>"***********************"</code><code>/></code></p>

<p><code></</code><code>g</code><code>></code></p>

<p> </p>

<p> </p>

<p> </p>

<p><code><</code><code>g</code><code>></code></p>

<p><code><</code><code>rect</code> <code>width</code><code>=</code><code>"120"</code> <code>height</code><code>=</code><code>"45"</code> <code>style</code><code>=</code><code>"fill:#FFFFFF;stroke-width:1;stroke:#c4c4c4;"</code> <code>/></code></p>

<p><code><</code><code>path</code>  <code>d</code><code>=</code><code>"--------------------------"</code><code>/></code></p>

<p> </p>

<p><code><</code><code>animate</code> <code>attributeType</code><code>=</code><code>"CSS"</code> <code>attributeName</code><code>=</code><code>"opacity"</code> <code>values</code><code>=</code><code>"0;0;1;1;1;1;0;0"</code> <code>dur</code><code>=</code><code>"4s"</code> <code>repeatCount</code><code>=</code><code>"indefinite"</code> <code>/></code></p>

<p><code></</code><code>g</code><code>></code></p>

<p> </p>

<p> </p>

<p> </p>

<p><code></</code><code>svg</code><code>></code></p>

<p>

댓글을 작성하려면 로그인이 필요합니다.

답변 1개

채택된 답변
+20 포인트
m
3년 전

에서 dur="4s" 이부분 0 으로 하면 되지 않을가요 ?
로그인 후 평가할 수 있습니다

댓글을 작성하려면 로그인이 필요합니다.

답변을 작성하려면 로그인이 필요합니다.

로그인