基于JavaScript的基于IE9的SVG渐变操作

Question

我有一个SVG文件，它指定了一个像下面这样的渐变和一个圆。嵌入的脚本切换渐变onClick（）的方向，该方法适用于除IE9以外的所有当前浏览器。我怀疑是IE不重绘渐变。我尝试了一些东西，例如先将填充设置为纯色，然后重新分配（更改）渐变，以触发重绘但目前为止没有骰子。我的问题是，是否有人能够解决这个问题，或者更好地解决问题。谢谢。

<?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>