it-swarm.com.de

SVG wird gerendert, aber nur in Firefox abgeschnitten - warum?

Ich benutze d3js, die SVG verwendet, um ein Diagramm zu erstellen. Sehen Sie es sich unter www.uscfstats.com/deltas an (verwenden Sie 12842311 als Eingabewert; im Moment ist es SEHR gehackt).

In Chrome, Safari und Firefox 10 wurde wie erwartet ein vollständiges Diagramm gerendert, das die gesamte weiße Box ausfüllte. In späteren Versionen von Firefox werden jedoch (insbesondere 15) die oberen 200 Pixel des SVG gerendert, der Rest wird jedoch abgeschnitten.

Wenn ich die Seite in Firebug öffne, kann ich HTML-Elemente hervorheben und es scheint, als wären alle vorhanden. Es ist, als würde ein großes weißes Kästchen die unteren 75% meines Diagramms verdecken (es gibt kein solches HTML) Element). Ich habe Klickereignisse auf den Punkten, und die gerenderten können angeklickt werden, aber diejenigen, die ich nicht finde, aber auf sie klickt, bewirken nichts.

Ich habe das Problem schriftlich behoben

var svg = d3.select("#scatterplot").append("svg").attr("width", "100%").attr("height", "100%");

Warum funktioniert das und was ist passiert?

21
Andrew Latham

Was geschah, war, dass die Spezifikation für die Funktion der SVG-Größenbestimmung geklärt wurde, damit sie in verschiedenen Fällen besser funktioniert. Firefox wurde aktualisiert, um die aktualisierte Spezifikation zu verfolgen. Insbesondere passt <svg> jetzt die Größe an andere CSS-ersetzte Elemente an, anstatt nach automatisch magischen Dingen zu suchen, die in allen möglichen Situationen fehlschlagen.

Insbesondere war es früher so, dass das Fehlen von Breiten- und Höhenattributen als eine Art Äquivalent zum Festlegen beider Attribute auf 100% angesehen wurde, mit der Ausnahme, dass Nizza nicht wirklich mit dem Festlegen einer Breite oder Höhe in CSS spielte und andere hatte Probleme. Wenn Sie also Breite und Höhe festlegen, werden diese wie Präsentationshinweise behandelt (genau wie die Attribute width und height für <img>), und wenn Sie nicht die Standardgröße 300x150 erhalten, können Sie sie mit Stilregeln überschreiben wie gewünscht.

18
Boris Zbarsky

Ich stand auch vor dem gleichen Problem

.attr("width", window.innerWidth).attr("height",window.innerHeight)

arbeitete für mich.

2
Amit

In Firefox müssen Sie definieren, welche Einheiten Sie verwenden: px, % etc

daher hat folgendes bei mir nicht geklappt:

var width = 800,
    height = 600;

var el = d3.select('#d3_element')
    .style('width', width)
    .style('height', height);

aber das Folgende hat funktioniert:

var el = d3.select('#d3_element')
    .style('width', width + 'px')
    .style('height', height + 'px');
1
RobotEyes

Stellen Sie außerdem sicher, dass Sie keine Variablennamen wie innerWidth oder outerHeight verwenden. Das war das Problem in meinem Fall. IE9 und Chrome machen es gut, aber Firefox (33.0) wird verrückt - vielleicht ein Fehler.

0
Ayush

Seltsamerweise funktionierte "100%" für die Breite, aber nicht für die Höhe. Ich beendete es, beide auf innerWidth/innerHeight zu setzen. Firefox 31.0 unter CentOS6. Zu Ihrer Information

0
dado

Fügen Sie svg in flex container ein und fügen Sie die Eigenschaft flex hinzu: auto; zu svg. Für mich geht das