마크 업에서 SVG 자식 요소 속성을 가져옵니다.

Question

선언 된 SVG 특성을 프로그래밍 방식으로 검색하려고합니다. 다음과 같은 인라인 콘텐츠입니다.

<svg> 
<path d="###########"> 
    <animate from="5" to="0" begin="3s" dur="1s" etc etc> 
</path> 
</svg> 

쉬운 소리가 들리니? 하지만 벽에 부딪쳤다. 나는 this를 읽을 수 있지만 스타터했습니다

document.getElementsByTagName('path'); 

의 주요 문제의 장소입니다 IE에서 작동하지 않습니다. 항상 정의되지 않은 값을 반환합니다.

(나는. 알고는 IE only supports scripted animation 것을, 즉이에 대한 전체 행사의 오전)

어쨌든은 "GET"부분은 크롬에서 작동하지만,이 노드 목록이 개발 도구에 로그인 할 때 콘솔은 인정

을 반환

[object Nodelist] 

나는 각각의 경로를 기록 할 때 비슷한 얻을 : 너무 IE와 유사한, 그리고 보통의 자세한 자바 스크립트입니다

[object Text] 

피사체가 어떻게되어 있는지 알려주지 않습니다. 마지막으로 애니메이션의 선언 된 속성을 검색하려고 할 때 :

.getAttributeNS(null, 'dur') 

크롬에서도 작동하지 않는 것 같습니다. Dev Tools는 경로 객체 텍스트에 'getAttributeNS'메소드가 없다고 말합니다. 일반 old 'getAttribute'에 대한 내용입니다. 또한 SVG 파일에서 ".contentDocument"를 시도했지만 작동하지 않습니다. 이를 얻을에

animation.setAttributeNS(null,'begin',startTimeRounded + 's'); 

난 그냥 수없는 것 : 기본적으로, 라 모든 브라우저에서이 값을 설정하는 모든 에 아무 문제가 없다. 어떤 조언을 높이 평가.

P. jQuery 선택기는 SVG 요소에서 작동하지 않으며, 게다가이 작은 문제를 해결하기 위해 라이브러리를로드하지 않아도됩니다.

P.P.S. 엄청난 양의 경로를 반복하므로 각 요소의 고유 ID를 설정하는 것이이 경우 도움이되지 않습니다. 요소를 이름으로 가져오고 싶습니다. 크로스 브라우저가 가장 좋지만 IE에서 작동해야합니다 ...

Answer 1

getElementsByTagName 및 SVG의 getAttribute 요소는 IE에서 제대로 작동하는 것 같습니다. Perharps에서 animate 요소가 아닌 path 요소에서 'dur'속성을 얻으려고합니까? 아니면, '경로'요소의 텍스트 노드에서?

SVG는 텍스트 노드와 관련하여 매우 엄격합니다. 예를 들어, 경로가 그런 식으로 정의 된 경우 : 두 번째는 '애니메이션'당신이 원하는되는 동안

<path d="M 0 0 L 10 5 L 0 10 z" > 
    <animate from="5" to="0" begin="3s" dur="1s"> 
</path> 

그것은는 '경로'요소의 첫 번째 아이가 텍스트 노드임을 고려할 것입니다.

<path d="M 0 0 L 10 5 L 0 10 z" ><animate from="5" to="0" begin="3s" dur="1s"></path> 

가 그런 다음 애니메이션은 '경로의 첫 번째 자식이 될 것입니다 : 당신이'경로 '와'요소 '사이에 공간이없이 모든 것을 정의하는 경우 따라서, 다음 코드는, 그러나

var paths = document.getElementsByTagName('path'); 
alert(paths[0].childNodes[1].getAttribute("dur")); //first path, second node ('animate'), the dur attribute 

작동합니다 '다음 코드는 확인을 실행합니다 :

var paths = document.getElementsByTagName('path'); 
alert(paths[0].childNodes[0].getAttribute("dur")); //now we can get the first child, as expected 

PS :이'아무것도하지 않는 것입니다 애니메이션 '을, 그것은 불완전으로