web-dev-qa-db-fra.com

SVG restitue mais est coupé dans Firefox uniquement - pourquoi?

J'utilise d3js, qui utilise SVG, pour créer un graphique. Affichez-la sur www.uscfstats.com/deltas (utilisez 12842311 comme valeur d'entrée; pour le moment, il est TRÈS hacké).

Sur Chrome, Safari et Firefox 10, cela donnait un graphique complet comme prévu, qui occupait toute la zone blanche. Sur les versions ultérieures de Firefox, cependant (plus précisément 15), les 200 premiers pixels environ du rendu SVG, mais le reste est coupé.

Lorsque j’ouvre la page dans Firebug, je peux mettre l’accent sur les éléments HTML et il semble qu’ils soient tous là. C’est comme si une grande boîte blanche recouvrait les 75% inférieurs de mon graphique (il n’existe pas de code HTML similaire). élément, cependant). J'ai des événements de clic sur les points, et je peux cliquer sur ceux qui sont affichés, mais je ne peux pas trouver ceux qui ne le sont pas, mais cliquer sur eux ne fait rien.

J'ai résolu le problème en écrivant

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

Pourquoi cela fonctionne-t-il et qu'est-il arrivé?

javascriptfirefoxsvgcross-browserd3.js
21
Andrew Latham

Ce qui s’est passé, c’est que la spécification relative à la manière dont le dimensionnement de svg devrait fonctionner a été clarifiée afin que cela fonctionne mieux dans divers cas, et Firefox a été mis à jour pour suivre la spécification mise à jour. En particulier, <svg> redimensionne maintenant de la même manière que les autres éléments remplacés par CSS, au lieu d’essayer des solutions de magie automatique qui échouent dans toutes sortes de situations.

Et en particulier, autrefois, le manque d’attributs de largeur et de hauteur était assimilé à leur attribution à 100%, sauf que cela ne jouait pas vraiment à Nice avec la définition d’une largeur ou d’une hauteur en CSS et problèmes. Alors maintenant, le comportement est que si vous définissez largeur et hauteur, celles-ci sont traitées comme des suggestions de présentation (tout comme les attributs width et height pour <img>) et si vous n'obtenez pas le dimensionnement intrinsèque par défaut 300x150 que vous pouvez ensuite remplacer par des règles de style comme voulu.

18
Boris Zbarsky

J'étais aussi confronté au même problème

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

a travaillé pour moi.

2
Amit

Dans Firefox, vous devez définir les unités que vous utilisez: px, % etc.

ainsi, les éléments suivants n'ont pas fonctionné pour moi:

var width = 800,
    height = 600;

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

mais ce qui suit a fonctionné:

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

Vérifiez également et assurez-vous que vous n'utilisez pas de noms de variables tels que innerWidth ou outerHeight . C'était le problème dans mon cas. IE9 et Chrome rend bien, mais Firefox (33.0) devient fou - peut-être un bug.

0
Ayush

Curieusement, "100%" travaillait pour la largeur mais pas pour la hauteur. J'ai fini de régler les deux paramètres sur innerWidth/innerHeight. Firefox 31.0 sur CentOS6. FYI

0
dado