SVG 내부의 SVG 애니메이션 : 요소를 사용합니다. Chrome이 아닌 Firefox에서 작동

svg:use 요소를 사용하여 움직이는 SVG 회 전자를 많은 노드가있는 큰 D3.js 트리에 포함합니다.SVG 내부의 SVG 애니메이션 : 요소를 사용합니다. Chrome이 아닌 Firefox에서 작동

한 노드는 다음과 같습니다

<g class="node clickable" data-path="1" data-depth="0" transform=""> 
    <text class="title" x="0" y=".36em" style="fill-opacity: 1;" text-anchor="begin">Model</text> 
    <text class="subtitle" x="0" y="2em" style="fill-opacity: 1;" text-anchor="begin"> 
    <use href="static/spinner.svg#spinner" transform="translate(54.75,-9) rotate(0 7,9)"> 
</g>

내가 트리에서 많은 g.node 요소의 하나에 필요할 때 스피너를 삽입 할 JQuery와 사용합니다.

<?xml version="1.0" encoding="utf-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> 
<svg id="spinner" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    width="16px" height="16px"> 
    <g> 
    <line x1="50" y1="3.167" x2="50" y2="23.5" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0s" /> 
    </line> 
     <line x1="80.102" y1="14.124" x2="67.033" y2="29.7" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.1333s" /> 
    </line>  
     <line x1="96.121" y1="41.867" x2="76.096" y2="45.398" opacity="0.2">   
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.2666s" /> 
    </line> 
    <line x1="90.559" y1="73.415" x2="72.949" y2="63.249" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.4s" /> 
    </line>  
     <line x1="66.018" y1="94.007" x2="59.064" y2="74.901" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.5333s" /> 
    </line> 
    <line x1="33.983" y1="94.007" x2="40.937" y2="74.901" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.6666s" /> 
    </line>  
     <line x1="9.442" y1="73.417" x2="27.052" y2="63.25" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.8s" /> 
    </line>  
    <line x1="3.879" y1="41.868" x2="23.904" y2="45.399" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="0.9333s" /> 
    </line>  
    <line x1="19.897" y1="14.124" x2="32.966" y2="29.7" opacity="0.2"> 
     <animate attributeType="CSS" attributeName="opacity" from="1" to="0.1" dur="1.2s" repeatCount="indefinite" begin="1.0666s" /> 
    </line> 
    </g> 
</svg>

이는 크롬이나 사파리 파이어 폭스에서 완벽하게 작동,하지만 다음과 같이

회 전자의 SVG 소스입니다. Chrome 및 Safari에서는 애니메이션의 첫 번째 '프레임'만 표시되지만 회 전자는 애니메이션으로 나타나지 않습니다.

누구든지이 문제를 해결하는 방법을 알고 있습니까?

감사합니다.

출처

2013-08-07 Bert

당신은 전체 코드 또는 JSFiddle/bl.ocks.org 버전에 대한 링크를 게시 할 수있는 기회를 다음과 같이

임시 해결책은 될 수 있을까? 조각이 모두 어떻게 어울리는지를 보는 것은 약간 어렵습니다. – explunit

attributeType = "XML"설정을 시도해 보셨습니까 –

@MichaelMullany : 시도했지만 아무런 효과가 없었습니다. – Bert

크롬은 내장 된 외부 SVG 파일의 애니메이션을 (자동으로) 재생하지 않지만, use 요소가 참조하는 SVG가 외부 파일에서로드되지 않고 문서의 어딘가에서로드 될 때 알아 냈습니다.

http://bl.ocks.org/bertspaan/6182774

출처

2013-08-08 08:43:12 Bert

일시적인 해결책 중 한 가지 가능한 개선 사항은 숨겨진 div 대신 svg' '요소를 사용하는 것입니다. http://stackoverflow.com/questions/18092976/is-it-possible-to-import-svg-shapes-in-d3-js/18093866#18093866을 참조하십시오. – explunit

SVG 내부의 SVG 애니메이션 : 요소를 사용합니다. Chrome이 아닌 Firefox에서 작동

답변

관련 문제