Warum SVG verwenden Element mit Javascript erstellt wird nicht angezeigt?

var myScene =document.getElementById('myScene'); 
var useSVG = document.createElement('use'); 
useSVG.setAttribute('xlink:href','spriteSheet.svg#mySymbol'); 
useSVG.setAttribute('x','10'); 
useSVG.setAttribute('y','30'); 
useSVG.setAttribute('width','10'); 
useSVG.setAttribute('height','10'); 
myScene.appendChild(useSVG);

Das Symbol nicht angezeigt wird, während der resultierende Code genau das gleiche wie ein weiterer Knoten in HTML Wich geschrieben ist, korrekt angezeigt.

-Code in Debugger angezeigt:

<svg id="myScene" width="200px" height="200px"> 
    <use xlink:href="spriteSheet.svg#mySymbol" x="5" y="50" width="10" height="10"></use> 
    <!-- this one was in html, it is visible --> 
    <use xlink:href="spriteSheet.svg#mySymbol" x="10" y="30" width="10" height="10"></use> 
    <!-- this one is added with javascript. it is not displayed --> 
</svg>

Quelle

2014-09-20 bokan

die Antwort unten nicht genug ist, weist jedoch auf die richtige Richtung. Hier müssen Sie auch 'document.createElementNS' anstelle von' document.createElement' verwenden, um das 'use' Element zu erstellen. Diese [Antwort] (http://stackoverflow.com/questions/16488884/add-svg-element-to-existing-svg-using-dom) löste das ähnliche Problem. –

Ich habe alles versucht, ich kann es nicht funktionieren lassen. Kann auch kein funktionierendes Beispiel finden. Meine Lösung besteht darin, dem fest codierten USE-Tag eine ID zu geben und es mit node.cloneNode() zu duplizieren. Ich suche immer noch ein funktionierendes Beispiel. – bokan

Sie müssen createElementNS() verwenden, um SVG-Elemente zu erstellen. Die Basis createElement() erstellt Elemente im HTML-Namespace. Sie haben also <html:use> Elemente anstelle von <svg:use> Elemente erstellt.

var myScene =document.getElementById('myScene'); 
var useSVG = document.createElementNS('http://www.w3.org/2000/svg', 'use'); 
useSVG.setAttributeNS('http://www.w3.org/1999/xlink','href','spriteSheet.svg#mySymbol'); 
useSVG.setAttribute('x','10'); 
useSVG.setAttribute('y','30'); 
useSVG.setAttribute('width','10'); 
useSVG.setAttribute('height','10'); 
myScene.appendChild(useSVG);

Demo here

aktualisieren

Ich habe dort nur realisiert ein zweites Problem mit Ihrem Code ist. Sie verwenden eine externe Referenz in Ihrem href (es verweist auf ein Symbol in einer anderen Datei). Es scheint, dass IE keine externen Referenzen unterstützt.

fand ich weitere Informationen und eine mögliche Abhilfe, hier: http://css-tricks.com/svg-use-external-source/

Quelle

2014-09-20 13:21:32

Danke ... aber es funktioniert in Chrome und Firefox, aber nicht in IE 10. Haben Sie eine Idee, warum? – bokan

Sie müssen möglicherweise 'useSVG.setAttributeNS ('http://www.w3.org/1999/xlink','xlink:href','spriteSheet.svg#mySymbol') ; auf IE. Versuchen Sie das. Wenn es immer noch nicht funktioniert, posten Sie bitte eine jsfiddle, damit wir Ihren Code sehen können. –

Funktioniert immer noch nicht. Vielleicht ist es, weil ich ein SVG-Symbol verwende, l, ll später mit Gruppen versuchen – bokan

Ich bin nicht zu 100% sicher, aber ich denke, Sie xlink:href Attribut mit setAttributeNS() wie folgt festlegen müssen:

useSVG.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'spriteSheet.svg#mySymbol');

auch sicher, dass die Namespace wird in Ihrem Dokument deklariert.

<html xmlns:xlink="http://www.w3.org/1999/xlink"> 

<!-- or if standalone svg --> 

<svg xmlns:xlink="http://www.w3.org/1999/xlink">

Doch diese Art und Weise gelöst ich das gleiche Problem in einem XHTML-Dokument, auch wahrscheinlich, dass für html5 oder Standalone SVG arbeiten.

xlink specification

viel Glück!

Quelle

2014-09-20 09:11:11 philipp

Probieren Sie es einfach aus, es funktioniert nicht, (Danke trotzdem. Es tut schreiben href Attribut ohne die 'Xlink' von xlink: href. – bokan

Warum SVG verwenden Element mit Javascript erstellt wird nicht angezeigt?

Antwort

Verwandte Themen