Question

我想要更改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>

此代码正在Opera，Chrome和IE 9中进行。

instanceRoot.correspondingElement - 未在Firefox / Mozilla中运行

Answer 1

据我所知here Mozilla不支持（甚至提及）instanceRoot财产。

该页面的最后更新时间为2011年6月27日。

作为附注，无论如何 - 从我能说的 - 你需要Firefox 4+正确使用SVG。

编辑：

或许，如果它适合你，你可以稍微改变你的代码：

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

并称之为：

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

代替。

Answer 2

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

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

这是一个很好的库，用于在Javascript中使用SVG grpahics和动画;使事情变得更容易，作为额外的奖励，它甚至可以在一些非常古老的浏览器中运行 - 包括IE的旧版本，可以追溯到IE6。

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

它也不依赖于任何其他库;您不需要使用JQuery或其他任何东西来使用它（尽管如果您愿意，它可以正常使用它）。

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

Answer 3

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

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

将c1的填充设置为 inherit
在单击处理程序中，设置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>

用JS操纵对象

3 个答案: