Im Idealfall sollte das so wie im folgenden Dokument funktionieren:
instanceRoot.correspondingElement wird aber nur von Opera und Chrome und IE 9 unterstützt, von Firefox/Mozilla gar nicht (schon instanceRoot ist null). Und Chrome und IE 9 unterstützen bei "use xlink:href" keine externe Datei, Opera erlaubt sie, aber dann funktioniert instanceRoot.correspondingElement nicht mehr.
So recht gibt es also keine Kombination, die deiner Idee, SVG-Objekte aus einer externen Datei zu instanziieren und auch manipulieren zu können, gerecht wird.
Code:
<?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');"/> </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> </svg> </div> </body> </html>
So recht gibt es also keine Kombination, die deiner Idee, SVG-Objekte aus einer externen Datei zu instanziieren und auch manipulieren zu können, gerecht wird.
Comment