javascript+;svg:在样式之外声明填充时获取填充

javascript+;svg:在样式之外声明填充时获取填充,javascript,svg,Javascript,Svg,我想替换svg中的另一个梯度,所以我需要迭代(可能是递归地)每个svg项以获得 我看了svg文档@MDN 但它是断开的(访问被拒绝,没有例子,大量断开的链接) 和MSDN的完全不同 所以我搜索任何关于如何访问svg元素的fill属性的指针,不管它是如何定义的。 类似于getComputedFill函数 <svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:svg="http://www.w3.org/20

我想替换svg中的另一个梯度,所以我需要迭代(可能是递归地)每个svg项以获得

我看了svg文档@MDN 但它是断开的(访问被拒绝,没有例子,大量断开的链接)

和MSDN的完全不同

所以我搜索任何关于如何访问svg元素的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>

这个怎么样

alert(document.defaultView.getComputedStyle(ref, null).getPropertyValue("fill"));
这个怎么样

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

在ellipse1和ellipse2上效果很好,但是它给出了完整的路径,而不是相对路径(可以处理),并且在use标记上不起作用。它有多“标准”?是的,我看到了。在ie>9上工作。(和往常一样,其他浏览器也可以)。谢谢你在ellipse1和ellipse2上非常有效,但是它给出了完整的路径,而不是相对路径(可以处理),并且在use标记上不起作用。它有多“标准”?是的,我看到了。在ie>9上工作。(和往常一样,其他浏览器也可以)。非常感谢。