SVG 애니메이션이 DOMLoad 이벤트를 기다립니다. timelineBegin = "onStart"가 작동하지 않습니까?

page에서 설명한대로 svg 애니메이션 타임 라인은 DOMLoad 이벤트로 시작됩니다. 하지만 timelineBegin = "onStart"에 의해 svg의로드로 변경할 수 있습니다.SVG 애니메이션이 DOMLoad 이벤트를 기다립니다. timelineBegin = "onStart"가 작동하지 않습니까?

미리로드 된 svg를 사용하고 싶습니다. 애니메이션을 시작해야합니다. 는 왜 애니메이션은 여전히 DOMLoad 이벤트를 대기 :

<svg id="map" version="1.2" width="100%" viewbox="-2 -2 506.3302 339.85639" xmlns:svg="http://www.w3.org/2000/svg" timelineBegin="onStart"> 
    <defs> 
     <radialgradient id="grad1" cx="0.65" cy="0.78" r="0.08" rx="0.5" ry="1"> 
      <stop offset="0.8" style="stop-color: #1a1a1a; stop-opacity:1"></stop> 
      <stop offset="100%" style="stop-color:rgb(255,255,255);stop-opacity:1"></stop> 
      <animate id="map-animation" attributeName="r" dur="2500ms" from="0.08" to="1.2" fill="freeze"/> 
     </radialgradient> 
    </defs> 
    <path id="map" fill="url(#grad1)" d="m733.83-66.9...> 
</svg>

출처

2017-11-27 Аскер Чик

현재 지원하는 브라우저가 없습니다. –

@RobertLongson [이전에 언급했듯이] (https://stackoverflow.com/a/40957325/8067821)와 같이 격리 된 체리 선택 기능에는이 기능이 포함되어 있지 않은 것은 불행한 것 같습니다. 정상적인 SVG에서도 매우 합리적인 기능인 것처럼 보이지만 [SVG 2] (https://www.w3.org/TR/SVG2/struct.html)에도 포함되지 않는 것 같습니다. –

로버트 Longson은 주석으로, timelineBegin="onStart"은 작은 SVG 1.2에 정의 된 속성, 그리고 SVG 1.2 작은 적이 없어 브라우저 지원. (SVG 1.1 Tiny SVG는 현대의 모든 풀 웹 브라우저에서 잘 나타나야합니다. 그러나 필수 요소 인 version="1.1" baseProfile="tiny" 속성을 제외하면 특정 요소, 속성 및 스타일 속성을 제외하고 다른 모든 버전 1.1 SVG와 같기 때문에 SVG는 예상됩니다. 허용되지 않습니다.)

그러나 대체 방법을 원한다면 iframe에서 SVG를 래핑하면 비슷한 결과가 발생할 수 있습니다. https://jsfiddle.net/potsq649/

(SVG를 사용하는 방법에 따라 단점이있을 수 있습니다 (예 : SVG와의 스크립트 상호 작용이 조금 복잡해 지지만 can still be done) 예에서 사용한 것처럼 데이터 URI를 사용하는 경우 , "#"문자를 포함하여 필요에 따라 URL 인코딩, 조각화 식별자로 텍스트를 처리하지 않으려면 % 23으로 URL 인코딩해야합니다.)

출처

2017-11-28 20:54:16

SVG 애니메이션이 DOMLoad 이벤트를 기다립니다. timelineBegin = "onStart"가 작동하지 않습니까?

답변

관련 문제