프로그래밍 방식으로 SVG 전환하는 방법

이 (브라우저 렌더링 된) SVG 요소를 페이드 인하 고 싶습니다 (불투명도를 1 초 이상 변경). 나는 그것을 퇴색시키고 사라 지도록 (애니메이션을 시작하기 위해) 프로그래밍 방식으로의 javaScript 예제를 찾고있다. <animate> 요소를 사용하여 전환 예제를 볼 수 있지만 모든 예제는 버튼 클릭, 마우스 이벤트 또는 단순히 페이지가로드 될 때 애니메이션을 제어하는 데 초점을 둡니다.프로그래밍 방식으로 SVG 전환하는 방법

<svg x="100" y="100px" opacity="1"> 
    <rect x="0px" height="60px" width="60px" fill="blue" /> 
</svg>

출처

2014-11-03 Dave

아마도 이상한 질문이지만, "왜?". 그리고 정말로해야한다면, CSS를'svg {opacity; 1; 전환 : 불투명도 1s; } svg.fadeout {opacity : 0}'그런 다음 fadeout 클래스를 설정하고, 트랜지션 엔드 JS 핸들러를 사용하여 클래스를 추가하거나 제거하십시오. –

페이드 인/아웃에 대한 내 기준은 사용자 입력이 아니라 클라이언트 창 크기입니다. CSS로 시도해 보았는데 성공하지 못했습니다. 구문 문제가있었습니다. 나는 다시 방문 할 것이다. – Dave

나는 그게 무슨 뜻인지 모르겠다. 끊임없이 페이드 인 및 페이드 아웃은 어떤 것에도 영향을 미치지 않으므로 페이드 인/아웃을 유발하는 요소와 그것이 한 번 또는 연속적으로 발생하기를 원하는지 여부를 설명하는 부분이 게시물에 없다고 생각합니다. –

이 요소에 'ID'를 추가, 자바 스크립트의 속성을 변경하려면 :

var elem= document.getElementById("mysvg"); 
elem.setAttribute('opacity', 0.5);

이나, 경우 :

<svg id="mysvg" x="100" y="100px" opacity="1"> 
    <rect x="0px" height="60px" width="60px" fill="blue" /> 
</svg>

당신이 '불투명'을 설정할 수 있습니다처럼 속성 당신은 jQuery를 사용하고 있습니다 :

$('#mysvg').attr('opacity',0.8);

cha 시간이 지남에 따라 타이머가 필요합니다.

var fadeOut= function(){ 
    var elem=document.getElementById("mysvg"); 
    var opacity= elem.getAttribute('opacity')-0.05; 
    if(opacity < 0.05){ 
     opacity=0; 
    } 
    elem.setAttribute('opacity',opacity); 
    if(opacity > 0) 
     setTimeout(fadeOut, 50); 
}; 

fadeOut();

출처

2014-11-04 05:14:55 TonyWilk

프로그래밍 방식으로 SVG 전환하는 방법

답변

관련 문제