D3/JavaScript를 사용하여 애니메이션을 중단하지 않고 SVG에서 애니메이션 GIF 정렬

Question

D3 기반 시각화는 애니메이션 GIF가 포함 된 HTML5 SVG 요소를 생성합니다. 간단하게하기 위해이 예제를 가지고 : 마우스 오버시

<svg> 
    <image href="animated.gif"></image> 
<svg> 

, 나는 광선 효과에 대한 페이딩 그라디언트 뒤에 원을 넣어 이미지를 강조하고 싶습니다. SVG는 서로 상단에 요소를 렌더링, 출력은 다음과 같이해야합니다

<svg> 
    <circle class="gloweffect"></circle> 
    <image href="animated.gif"></image> 
<svg> 

을 두 낭비 일 후, 나는 D3의 삽입 즉시 정확한 위치에 원형 요소를 삽입하려고 포기했다. 그것은 단지 작동하지 않았습니다. 왜냐하면 시각화에는 많은 다른 것들이 포함되어 있으며 삽입 위치는 표현하기 어렵 기 때문입니다.

대신에 D3의 추가를 사용하여 끝에 서클을 추가합니다. 그리고 나는 SVG의 모든 요소를 ​​제거를 정렬하고 올바른 순서로 재 - 추가 분류기 전화 :

<svg> 
    <image href="animated.gif"></image> 
    <circle class="gloweffect"></circle> 
<svg> 

--> remove everything 

<svg> 
<svg> 

--> sort and reinsert 

<svg> 
    <circle class="gloweffect"></circle> 
    <image href="animated.gif"></image> 
<svg> 

을 그리고 여기에 도전을 제공 : 이것은 제외한 모든 브라우저에서 잘 작동 ... 그것을 기다려라. IE9. (알았어, 절름발이 대기)

이미지 요소가 제거 되 자마자 IE9는 GIF 애니메이션을 중지하고 재 삽입 할 때 다시 시작하거나 계속하지 않습니다. 이미지는 단순히 첫 번째 프레임에서 멈추고 그대로 유지됩니다.

제 질문 : IE9를 다시 삽입 한 후에도 애니메이션을 계속 진행할 수있는 방법이 있습니까? 나는 보통의 img 요소들에 관해서 많은 오래된 스레드들을 발견했다. 지연된 스레드에서 그림을 재설정 할 것을 제안했지만 SVG에서 이미지 요소에 대해 작동하지 않는 것으로 보입니다.

--Florian

Answer 1

대신 삽입하고 당신과 같은 일을 할 수있는, 그들에게 보이지 않게 (비용 및 오류 경향이있는) 요소를 제거 ...에서 다음

<svg> 
    <g class="glow"> 
    <circle class="gloweffect"></circle> 
    <image href="animated.gif"></image> 
    </g> 
<svg> 

그리고 당신의 CSS :

g.glow .gloweffect { 
    opacity: 0; 
} 

g.glow:hover .gloweffect { 
    opacity: 1; 
}