IE9上基于JavaScript的SVG梯度操作_Javascript_Svg

IE9上基于JavaScript的SVG梯度操作

javascript svg

IE9上基于JavaScript的SVG梯度操作,javascript,svg,Javascript,Svg,我有一个SVG文件，它指定了一个梯度和一个圆，如下所示。嵌入的脚本切换gradient onClick（）的方向，该脚本在除IE9之外的所有当前浏览器中都有效。我怀疑IE没有重新绘制梯度。我尝试了一些方法，比如先将填充设置为纯色，然后再重新指定（更改的）渐变，以触发重画，但到目前为止还没有骰子。我的问题是，有没有人知道我如何解决这个问题，或者，更好的是，解决它。谢谢 <?xml version="1.0" encoding="UTF-8"?> <!DOCTYPE svg PUB

我有一个SVG文件，它指定了一个梯度和一个圆，如下所示。嵌入的脚本切换gradient 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>

编辑：

编辑stops帮助，使其变得可行。但事实是，我的实际文件看起来更像以下内容，这是Inkscape svg输出，其中渐变分为颜色部分和几何部分，只有几何体链接到from和object，但颜色在多个其他渐变中重复使用。交换停止点的方法将影响链接到该颜色渐变的所有对象：

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

在IE9上测试了一点之后，似乎梯度向量在IE中定义后是不可变的。您唯一的选择是使用id的梯度停止，它是可变的

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

在IE9上测试了一点之后，似乎梯度向量在IE中定义后是不可变的。您唯一的选择是使用id的梯度停止，它是可变的

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

谢谢，我也许能把它变成一个可行的想法，尽管这会很困难。事实上，我的文件看起来更像以下内容，这是Inkscape svg输出，其中渐变被分为颜色部分和几何部分，只有几何部分链接到from和object，但颜色在多个outher渐变中重复使用：谢谢，我可能能够将其转化为可行的想法，尽管这会很困难。事实上，我的文件看起来更像以下内容，这是Inkscape svg输出，其中渐变分为颜色部分和几何部分，只有几何体链接到from和object，但颜色在多个outher渐变中重用：您需要动态翻转任何颜色的渐变的能力吗？如果只有几次翻转，可以定义“gradColorFlip”渐变，并更改圆上的填充属性。是否需要动态翻转任何颜色的渐变？如果只有几个翻转，可以定义“gradColorFlip”渐变，并更改圆上的填充属性。