2013-03-05 7 views
12

Ich versuche, ein Svg-Bild mit der Erweiterung ". Svg" zu meinem Diagramm (ein anderes Svg Bild mit d3 erstellt).d3 anhängen ein Bild mit Svg-Erweiterung

Dies ist der Code:

d3.select("#chart1 svg") 
    .append("svg:image") 
    .attr("xlink:href", "img/icons/sun.svg") 
    .attr("width", 40) 
    .attr("height", 40) 
    .attr("x", 228) 
    .attr("y",53); 

Wie Sie sehen, ich bin "xlink: href" -Einstellung Attribut, aber d3 ändert dies im Browser href:

<image href="img/icons/sun.svg" width="40" height="40" x="228" y="53"></image> 

In der Tat , dieser Code funktioniert perfekt, wenn ich Png-Erweiterung verwende. Irgendeine Idee?

+1

Ich habe auch Probleme damit. Anscheinend entfernt D3 das Präfix, wenn das Präfix ein bekannter Namespace ist. Hier gibt es mehr Details über Namespaces: https://github.com/mbstock/d3/wiki/Namespaces –

+1

Solange das Attribut mit 'setAttributeNS' hinzugefügt wird, funktioniert es in allen Browsern gut (und um klar zu sein, D3 tut dies). Das fehlende Präfix für das Attribut selbst ist nur dann ein Problem, wenn Sie möchten, dass die Serialisierung von Dokumenten/Elementen auf eine bestimmte Weise erfolgt. –

+0

Sieht so aus, als ob das immer noch eine Sache ist ... Hat jemand bisher eine Lösung gefunden? –

Antwort

14

ist Der Code sollte so arbeiten - hier ein Beispiel für die Befestigung einer SVG-Datei zu d3 sehen: nur

http://jsfiddle.net/am8ZB/

Vergessen Sie nicht, dass es möglich ist das Bild tatsächlich gibt es aber Ich kann es nicht sehen - Sie sollten die Seite mit den Browser-Entwicklertools untersuchen, um zu sehen, ob das Bild außerhalb des Ansichtsbereichs platziert wurde (z. B. aufgrund Ihrer x/y-Werte).

Weitere Informationen über #chart1 würde in diesem Fall helfen.

Verwandte Themen