mr_sol: SVG Objekte mit js ansprechen

Beitrag lesen

Hallo Thomas!

Hier sieht man das Problem besser. Es gibt 2 Instanzen von c1. (uc1,uc2) ich möchte unabhängig bei beiden die Farbe verändern.

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