[D3.js] SMIL을 이용한 클릭 이벤트

codingman(64)

Published in

#dclick

Words

236

Reading

2 min

Listen to this post

~2 min

[D3.js] SMIL을 이용한 클릭 이벤트

실험예제 출처 : Introduction to SMIL animation in SVG http://srufaculty.sru.edu/david.dailey/svg/smil_svg.html
사전학습
SMIL을 이용한 SVG 애니메이션
[D3.js] SMIL을 이용한 라인트레이서

오늘은 "Introduction to SMIL animation in SVG"에 나와 있는 클릭 이벤트를 실험을 해 볼까 합니다. 클릭 이벤트는 아주 간단하게 begin 속성에 "Click" 값만 지정하면 해당 태그의 클릭 이벤트를 부여 할 수 있습니다. 추가로 마우스 이벤트는 begin="mouseover" or begin="mouseout" 로 속성을 지정하면 간단히 마우스 이벤트 효과를 나타 낼 수 있습니다. 그리고 begin은 시작의 의미가 있듯이 끝의 의미인 end 속성이 있는데 영어 단어의 의미처럼 이해하시고 사용하시면 됩니다. 본 실험에서는 사용하지 않습니다 그러면 위 링크 출처에 나온 클릭 이벤트 시험을 시작하겠습니다.

1. 클릭 이벤트

<animate attributeName="font-size" begin="click"  values="10;30;10" dur="3" repeatCount="indefinite" />

attributeName은 어떤 속성을 이벤트를 부여할 것인지 이름을 선택하고 font-size로 지정되어 있더군요. 거기에 values은 10->30->10으로 하면 3초(dur)동안 values값순서대로 font-size가 변경됩니다. repeatCount은 indefinite로 무한 반복하게 됩니다.
시작(begin)은 click 했을 때 방금 말한 동작을 수행 한다고 합니다.

좀 더 다듬어서 글자를 스타일을 추가했네요.

<script src="https://d3js.org/d3.v5.min.js"></script>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" style="background: black">  
    <text x="20%" y="50%" font-weight="bold" font-family="궁서" font-size="30" fill=#ff00ff>
      <animate attributeName="font-size" begin="click"  values="10;30;10" dur="3" repeatCount="indefinite" />
    스팀잇 가즈야!</text>
</svg>

[결과]

2. 마우스 이벤트

클릭만 하고 끝나면 아쉬우니깐 출처에 마우스 이벤트가 있어서 추가로 따라서 실험 했네요.

 <set attributeName="fill" to="red" begin="mouseover" />
 <set attributeName="fill" to=#ff00ff begin="mouseout" />

위 코딩은 출처에 나온 코딩입니다. fill의 값을 red로 표현해도 되고 #ff0000으로 표현 해도 됩니다. 두가지 색상 표현을 나타 낼 수 있습니다. 마우스를 가져다 대면 Red로 바뀌고 마우스가 해당 텍스트에서 벗어나면 원래 색으로 돌아 옵니다.

<script src="https://d3js.org/d3.v5.min.js"></script>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" style="background: black">  
    <text x="20%" y="50%" font-weight="bold" font-family="궁서" font-size="30" fill=#ff00ff>
      <set attributeName="fill" to="red" begin="mouseover" />
      <set attributeName="fill" to=#ff00ff begin="mouseout" />
    스팀잇 가즈야!</text>
</svg>

[결과]

3. 종합

클릭 이벤트와 마우스 이벤트를 합쳐서 완성해 봅시다.

<script src="https://d3js.org/d3.v5.min.js"></script>
  <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="200px" style="background: black">  
    <text x="20%" y="50%" font-weight="bold" font-family="궁서" font-size="30" fill=#ff00ff>
      <animate attributeName="font-size" begin="click"  values="10;30;10" dur="3" repeatCount="indefinite" />
      <set attributeName="fill" to="red" begin="mouseover" />
      <set attributeName="fill" to=#ff00ff begin="mouseout" />
    스팀잇 가즈야!</text>
</svg>