[D3.js] SMIL을 이용한 클릭 이벤트
[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>
[결과]
마무리
오늘은 간단하게 Click, mouseover, mouseout 등의 이벤트를 실험해 보았습니다. 공부하기 귀찮아서 쉬운 주제로 post를 작성했네요.
짱짱맨 호출에 응답하여 보팅하였습니다.
감사합니다.
재미있는 함수네요. 글자가 크지기도 하고 색깔도 바뀌고...
이걸 이용해서 동적인 버턴을 만들면 좀 화려해져 더 재미가 있지요.
Congratulations @codingman! You have completed the following achievement on the Steem blockchain and have been rewarded with new badge(s) :
Click here to view your Board
If you no longer want to receive notifications, reply to this comment with the word
STOP
To support your work, I also upvoted your post!
Do not miss the last post from @steemitboard:
집에 도둑이 들어 2틀간 멘붕 상태 였습니다. 수습하고 돌아 왔습니다.
스팀 제발 가즈아~~~~~
아 그리고, 제가 디클로는 글을 쓸수가 없네요 전... 그래서 카페지기님 카페에 쉐어2스틤 주소 좀 올려 주실수 있나요? 전에 제 글에서 복사해서 붙히는데... 병원만 계속 되고 잇어요^^