Javascript 用JS操作对象_Javascript_Object_Svg

Javascript 用JS操作对象

javascript object svg

Javascript 用JS操作对象,javascript,object,svg,Javascript,Object,Svg,我想更改SVG对象的属性 <?xml version="1.0" encoding="UTF-8"?> <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink"> <head> <title>SVG use test</title> <script type="text/javascript

我想更改SVG对象的属性

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
<head>
<title>SVG use test</title>
<script type="text/javascript">
function setUsedFill(uId, fill) {
  document.getElementById(uId).instanceRoot.correspondingElement.setAttributeNS(null, 'fill', fill);
}
</script>
</head>
<body>
<div>
<input type="button" value="test" onclick="setUsedFill('uc1', 'yellow');"/>
<input type="button" value="test" onclick="setUsedFill('uc2', 'red');"/>
</div>
<div>
<svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
  <defs>
    <circle id="c1" cx="50" cy="50" r="30" fill="green"/>
  </defs>
  <use id="uc1" x="0" y="0" xlink:href="#c1"></use>
  <use id="uc2" x="100" y="100" xlink:href="#c1"></use>
</svg>
</div>
</body>
</html>


SVG使用测试
函数setUsedFill（uId，fill）{
document.getElementById（uId）.instanceRoot.correspondingElement.setAttributeNS（null，'fill'，fill）；
}

这段代码在Opera、Chrome和IE9中进行

instanceRoot.correspondingElement

-在Firefox/Mozilla中没有运行

，我可以告诉你Mozilla不支持（甚至没有提到）

instanceRoot

属性

该页面最后更新日期为2011年6月27日

作为补充说明，在任何情况下——据我所知——您都需要Firefox4+正确使用SVG

编辑：

或者，如果适合您，您可以稍微更改代码：

function setUsedFill1(uId, fill) {
  document.getElementById(uId).setAttributeNS(null, 'fill', fill);
}

并称之为：

<input type="button" value="test" onclick="setUsedFill1('c1', 'yellow');"/>

相反。

在对另一个答案的评论中，你问“有其他选择吗？”

对于SVG工作，我使用的替代方法是javascript库

它是一个优秀的库，用于在Javascript中使用SVG grpahics和动画；使事情变得更简单，作为一个额外的好处，它甚至可以在一些非常旧的浏览器中工作——包括旧版本的IE，最早可以追溯到IE6

它与IE一起工作的原因是，它透明地检测浏览器，并切换到使用VML而不是SVG绘制图形。但从您作为开发人员的角度来看，您不需要了解这一点；您需要知道的是，它可以在所有浏览器中工作。好极了

它也不依赖于任何其他库；您不需要使用JQuery或其他任何东西来使用它（尽管如果您愿意，它可以很好地与它们配合使用）

我现在在纯SVG中根本不做任何工作；一切都是通过Raphael完成的。

尽管文档中不太清楚，但在use元素中设置值会设置def中的实际元素。至少，这就是它在chrome和IE11上的工作原理。FF29仍然没有instanceRoot

有两个调整可以让OP的示例按预期工作：

将c1的填充设置为

在单击处理程序中，设置use元素的fill属性，而不是 instanceRoot.correspondingElement

以下是OP的代码，已修改：

<?xml version="1.0" encoding="UTF-8"?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" xmlns:xlink="http://www.w3.org/1999/xlink">
  <head>
    <title>SVG use test</title>
      <script type="text/javascript">
        function setUsedFill(uId, fill) {
          /* Set the fill attribute of the <use> element, not the inner instanceRoot.correspondingElement */  
          document.getElementById(uId).setAttributeNS(null, 'fill', fill);
        }
      </script>
    </head>
    <body>
      <div>
        <input type="button" value="test" onclick="setUsedFill('uc1', 'yellow');"/>
        <input type="button" value="test" onclick="setUsedFill('uc2', 'red');"/>
      </div>
      <div>
        <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300">
          <defs>
            <!-- set the fill in the def to "inherit" -->
            <circle id="c1" cx="50" cy="50" r="30" fill="inherit"/>
          </defs>
          <use id="uc1" x="0" y="0" xlink:href="#c1" fill="green"></use>
          <use id="uc2" x="100" y="100" xlink:href="#c1" fill="green"></use>
        </svg>
      </div>
    </body>
  </html>


SVG使用测试
函数setUsedFill（uId，fill）{
/*设置元素的填充属性，而不是内部instanceRoot.correspondingElement*/
document.getElementById（uId）.setAttributeNS（null，'fill'，fill）；
}

不可能有两个或多个单独寻址实例。代码更改了所有实例。@用户：我还没有使用D3，所以我不能提供意见。但据我所知，D3不提供旧版IE的VML回退功能。我需要此功能，因为我需要支持IE7和IE8（谢天谢地不再支持IE6），因此如果是这种情况，D3将不适合我。请注意，SVG2已从

SVGUseElement

中删除了

instanceRoot

访问器，请参阅。注意。这个例子不再适用于那些浏览器。如果实现了对SVG 2阴影DOM的完全支持，则可能会返回不同形式的支持。