IE9에서의 JavaScript 기반 SVG 그래디언트 조작

Question

아래 그라디언트와 원을 지정하는 SVG 파일이 있습니다. 임베디드 스크립트는 그라디언트 onClick()의 ​​방향을 토글합니다. IE9를 제외한 모든 현재 브라우저에서 작동합니다. 내 생각에 IE는 그라디언트를 다시 그리지 않는다. 필자는 채우기를 단색으로 설정하고 thenm은 변경된 그라디언트를 재 할당하여 그리기를 트리거하지만 지금까지는 주사위를 트리거하지 않는 등 몇 가지 시도를했습니다. 제 질문은, 누구든지 제가 어떻게 그 문제를 해결할 수 있는지, 아니면 더 잘 해결할 수 있는지에 관한 것입니다. 감사.

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     var g=document.getElementById('grad1'); 
     var y1 = g.getAttribute('y1'); 
     var y2 = g.getAttribute('y2'); 
     g.setAttribute('y2', y1); 
     g.setAttribute('y1', y2); 
    } 
    ]]> 
    </script> 
    <defs> 
    <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 
    <circle cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#grad1)" onclick="flipGrad(evt)" /> 
</svg> 

편집 : 정지를 편집

도움이, 그래서 가능한 될 수 있습니다. 사실이지만 내 실제 파일은 그라디언트가 색상 섹션과 형상 섹션으로 분할되고 형상 만이 개체와 연결되어 있지만 색상이 여러 다른 그라디언트에서 재사용되는 Inkscape svg 출력과 비슷합니다. 멈춤을 교환하는 방법은 컬러 그라디언트로 연결되는 모든 객체에 영향 것이다 :

<?xml version="1.0" encoding="UTF-8"?> 
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd"> 
<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     // var g=document.getElementById('gradGeometry'); 
     // var y1 = g.getAttribute('y1'); 
     // var y2 = g.getAttribute('y2'); 
     // g.setAttribute('y2', y1); 
     // g.setAttribute('y1', y2);\ 
     var s1=document.getElementById('stop1'); 
     var s2=document.getElementById('stop2'); 
     var s1s = s1.getAttribute('style'); 
     var s2s = s2.getAttribute('style'); 
     s1.setAttribute('style', s2s); 
     s2.setAttribute('style', s1s); 
    } 
    ]]> 
    </script> 
    <defs> 
    <linearGradient id="gradColour"> 
     <stop id="stop1" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop id="stop2" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    <linearGradient id="gradGeometry1" x1="0%" y1="0%" x2="0%" y2="100%" xlink:href="#gradColour" /> 
    <linearGradient id="gradGeometry2" x1="0%" y1="0%" x2="100%" y2="0%" xlink:href="#gradColour" /> 
    </defs> 
    <circle cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#gradGeometry1)" onclick="flipGrad(evt)" /> 
    <circle cx="90" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#gradGeometry2)" onclick="flipGrad(evt)" /> 
</svg> 

Answer 1

IE9에 비트를 시험 한 결과,이 IE에 정의하면 그래디언트 벡터가 불변 인 것으로 보인다. 당신의 유일한 선택은 변경 가능한 id'd 그라디언트 정지를 사용하는 것입니다.

<svg xmlns:xlink="http://www.w3.org/1999/xlink" xmlns="http://www.w3.org/2000/svg" height="70" width="190"> 
<script type="text/javascript"> 
    <![CDATA[ 
    function flipGrad(evt) { 
     var s1=document.getElementById('stop1'); 
     var s2=document.getElementById('stop2'); 
     var s1s = s1.getAttribute('style'); 
     var s2s = s2.getAttribute('style'); 
     s1.setAttribute('style', s2s); 
     s2.setAttribute('style', s1s); 
    } 
    ]]> 
    </script> 
    <defs> 
     <linearGradient id="grad1" x1="0%" y1="0%" x2="0%" y2="100%"> 
     <stop id="stop1" offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" /> 
     <stop id="stop2" offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" /> 
    </linearGradient> 
    </defs> 

    <circle id="bubble" cx="30" cy="30" r="20" stroke="black" stroke-width="2" fill="url(#grad1)" onclick="flipGrad(evt)" /> 
</svg>