nicht angemeldet
Hallo mr_sol,
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.
Alternativer Vorschlag über verschiedene Symbole und Austausch der use-Referenzen statt der Farben selbst:
<?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">
[code lang=javascript] var xlinkns = "http://www.w3.org/1999/xlink";
var f_vs_id = {'green' : '#c1', 'yellow' : '#c2', 'red' : '#c3'};
function setUsedFill(uId, fill) {
document.getElementById(uId).setAttributeNS(xlinkns, 'href', f_vs_id[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>
<symbol id="c1">
<circle cx="50" cy="50" r="30" fill="green"/>
</symbol>
<symbol id="c2">
<circle cx="50" cy="50" r="30" fill="yellow"/>
</symbol>
<symbol id="c3">
<circle cx="50" cy="50" r="30" fill="red"/>
</symbol>
</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>[/code]
Grüße,
Thomas