배경 SVG 애니메이션 다시 시작

Question

SVG가 요소의 배경 이미지로 설정되어 있습니다. 요소가 처음 표시되면 애니메이션이 올바르게 재생됩니다.

이후의 디스플레이에서 (예 : 요소의 복제물이 자바 스크립트를 통해 삽입되거나 배경 이미지가 제거되어 CSS/JavaScript로 다시 추가되는 경우) 애니메이션이 처음부터 시작되지 않습니다. 이미지가 브라우저에 의해 다시로드 된 것으로 간주되지 않기 때문에 의도 된 기능이라고 생각합니다. 이미 애니메이션이 적용되는 메모리 버전을 사용합니다. 여기

이의 데모 (안 내)입니다 : http://www.luigifab.info/public/svg-smil/test.html

이 Firefox 및 Chrome에 대한 몇 가지 관련된 브라우저 버그 보고서가 있지만 위와 같이 나는이 기능을위한 것입니다 생각합니다.

이미지가 표시 될 때마다 내 SVG 애니메이션을 재설정/재생할 수있는 방법이 있습니까?

저는 CSS와 SVG만으로 솔루션을 찾고 있습니다. 그렇지 않은 경우 JavaScript를 사용하는 솔루션이 필요합니다.

Answer 1

이미지 URL을 변경하여 브라우저를 다시로드 할 수 있습니다.

Answer 2

내 생각에 "이미지가 브라우저에서 다시로드 된 것으로 간주되지 않습니다. 이미 애니메이션이 적용된 메모리 버전을 사용합니다"라는 말은 SVG 파일이 캐시되므로 정확합니다! 따라서 (실제) '다시로드'가 없으면 애니메이션이 다시 트리거되지 않습니다.

음, 먼저 SVG 애니메이션을 살펴 보겠습니다. 애니메이션을 반복하는 데 사용되는 두 가지 특성이 있습니다 (Repeating Animations 및 The ‘animate’ element 참조). 귀하의 경우 애니메이션은 한 번만 실행됩니다 (반복 없음).

애니메이션을 "트리거"하려면 자바 스크립트가 필요합니다.
이것은 원칙적으로 가능합니다 (예 : Advanced SVG Animation Techniques). SVG 파일이 자바 스크립트를 통해 액세스 할 수있는 DOM의 일부인 경우에만 가능합니다. 따라서 SVG 파일을 <object>으로 포함시켜야합니다.

<img> 태그 또는 CSS background-image으로 SVG 파일을 사용하는 즉시 파일에 대한 스크립트 액세스 권한이 없습니다.

내가 목표를 달성하기 위해 생각할 수있는 유일한 방법은 브라우저가 SVG 파일 (How (and how not) to Control Caches 참조)을 캐싱하지 못하도록하거나 <object> 요소의 SVG 파일을 사용하여 자바 스크립트를 통해 애니메이션을 제어 할 수있게하는 것입니다 .

현재 : luigifab의 대답은 그렇게 나쁘지 않습니다. 이것은 파일/이미지를 강제로 다시로드하는 데 종종 사용되는 "트릭"입니다. 참조 - The Cache Trick

Answer 3

luigifab의 대답은 다음과 같습니다. 일부 random things을 url 매개 변수의 끝에 넣으면 브라우저가 자원을 "새 자원"이라고 생각하게 만듭니다. Demo

Answer 4

캐시 무효화를 위해 URL에 임의의 키를 사용하십시오. 예제에 제대로 테스트 할 긴 애니메이션이 없지만 차이를 눈에 잘 띄게 만들기 위해 이미지로드 반복을 추가했습니다.

url + "&" + Math.random()

일정 URL 아니오 다시로드 데모 : http://jsfiddle.net/4ZBLr/8/

임의 URL의 SRC와 다시로드 데모 : @netsurfer 말했듯이, 내가 object를 사용하여이 문제를 해결 http://jsfiddle.net/4ZBLr/9/

Answer 5

. 나는 동적으로 애니메이션이 처음부터 시작하는 SVG object를 주입

<object type="image/svg+xml" data="my.svg"></object> 

때마다 예를 들면 다음과 같습니다.

Answer 6

많은 시나리오에서 브라우저가 지원하는 경우 setCurrentTime(0)이 최선의 해결책이라고 생각합니다. 여기에 (당신은 물론, 내장의 <object> 태그를 사용 가정) 예입니다 관련 API에 대한

let content = document.getElementById("object-id").contentDocument; 
let svg = content.getElementsByTagName("svg")[0]; 
if(svg.getCurrentTime() > 10) 
    svg.setCurrentTime(0); 

더 많은 정보를 정기적으로는 여기에서 찾을 수 있습니다 : https://developer.mozilla.org/en-US/docs/Web/API/SVGSVGElement