Snap.svg에서 호버 애니메이션을 요소별로 해본다.
라고 할까 SVG 자체 거의 처음입니다.
아는 엔지니어 쪽에게 가르쳐 주었습니다만, 여기의 사이트( Snap.svg 사용법 요약 )가 좋은 것 같으므로 참고로 해 써 보고 있습니다.
요소별로 애니메이션하고 싶습니다.
이런 식으로 사각형을 만들어 각 요소마다 애니메이션 시키고 싶습니다.
svg.js
var paper = Snap(200,200).remove().attr({viewBox: [0,0,200,200]});
var rect = [];
rect[0] = paper.rect(10,10,30,30).attr({fill:"red"});
rect[0].mouseover(function(e){
rect[0].attr({fill: "blue"});
});
rect[0].mouseout(function(e){
rect[0].attr({fill: "red"});
});
rect[1] = paper.rect(10,50,30,30).attr({fill:"red"});
rect[1].mouseover(function(e){
rect[1].attr({fill: "blue"});
});
rect[1].mouseout(function(e){
rect[1].attr({fill: "red"});
});
}
rect[2] = paper.rect(10,90,30,30).attr({fill:"red"});
rect[2].mouseover(function(e){
rect[2].attr({fill: "blue"});
});
rect[2].mouseout(function(e){
rect[2].attr({fill: "red"});
});
}
var container = document.querySelector("#container");
paper.prependTo(container);
for문으로 정리하면 'attr' of undefined 라고 화났다.
이런 식으로 하면
Uncaught TypeError: Cannot read property 'attr' of undefined 라고 화났습니다.svg.js
var paper = Snap(200,200).remove().attr({viewBox: [0,0,200,200]});
var rect = [];
for(var i = 0; i < 3; i++){
var y = 10 + i * 40;
rect[i] = paper.rect(10,y,30,30).attr({fill:"red"});
rect[i].mouseover(function(e){
rect[i].attr({fill: "blue"});
});
rect[i].mouseout(function(e){
rect[i].attr({fill: "red"});
});
}
var container = document.querySelector("#container");
paper.prependTo(container);
# 이벤트 발화시 this를 사용하면 잘 갔다.
rect[i].attr() 를 this.attr() 로 변경하면 좋았습니다. rect[i].mouseover(function(e){
this.attr({fill: "blue"});
});
rect[i].mouseout(function(e){
this.attr({fill: "red"});
});
this의 참조가 바뀌는 것 같습니다.
Snap.svg 편리 같기 때문에 좀 더 만져 보겠습니다.
Reference
이 문제에 관하여(Snap.svg에서 호버 애니메이션을 요소별로 해본다.), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/n0bisuke/items/a9687b4780ec897f1755텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
좋은 웹페이지 즐겨찾기
