자바 스크립트 + SVG :이 스타일의 외부에서 선언 된 경우

Question

내가 그래서

나는 보았다 얻기 위해 각 SVG 항목 이상 (아마 재귀 적으로) 반복 할 필요가 SVG에서 서로에 대한 그라데이션을 대체 할 채울 수 는 SVG 문서의 @의 MDN에서 https://developer.mozilla.org/fr/SVG/Element/ellipse 있지만 고장은

및 MSDN I가 어떤 포인터를 검색 그래서 http://msdn.microsoft.com/en-us/library/ie/ff972071%28v=vs.85%29.aspx

에서 하나의 매우 다른를 (액세스, 아니 exemple, 깨진 링크를 많이 거부 없음) svg elem의 fill 속성에 액세스하는 방법 그러나 그것이 정의되었습니다. getComputedFill 기능

<svg 
version="1.1" 
    xmlns="http://www.w3.org/2000/svg" 
    xmlns:svg="http://www.w3.org/2000/svg" 
    xmlns:dc="http://purl.org/dc/elements/1.1/" 
    xmlns:cc="http://creativecommons.org/ns#" 
    xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#" 
    xmlns:xlink="http://www.w3.org/1999/xlink" 
    xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd" 
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape" 

> 
    <defs> 
    <script> 
     <![CDATA[ 

     function infothis(ref) 
     { 
     alert(ref + " " + ref.fill + " " + ref.fillOpacity); // why can't I get "url(#grad1)" and 0.5 when clicking ellipse1 
     //alert(ref.style.getPropertyValue("fill"));   // somewhat okwhy can't I get "url(#grad2)" when clicking ellipse2 

     } 

     ]]> 
    </script> 
    <linearGradient 
    dc:title="red black filter" 
    dc:rights="CC-BY" 
    dc:description="basic filter ranging from black to red" 
    id="grad1" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 

    <linearGradient id="grad2" x1="0%" y1="0%" x2="100%" y2="0%"> 
     <stop offset="0%" style="stop-color:rgb(0,0,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,255);stop-opacity:1" /> 
    </linearGradient> 

    <ellipse id="ellipse0" cx="150" cy="170" rx="85" ry="55" fill="url(#grad2)" /> 
    </defs> 

    <ellipse id="ellipse1" cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" fill-opacity="0.5" onclick="infothis(this)" /> 
    <ellipse id="ellipse2" cx="100" cy="70" rx="85" ry="55" style="fill:url(#grad2)" onclick="infothis(this)" /> 
    <use xlink:href="#ellipse0"/> 
</svg> 

Answer 1

이 방법에 대해 같은 뭔가 ...

alert(document.defaultView.getComputedStyle(ref, null).getPropertyValue("fill"));