SVG делает, но отключается только в Firefox - почему?

Я использую d3js, который использует SVG, для создания диаграммы. Просмотрите его на www.uscfstats.com/deltas (используйте значение 12842311 в качестве входного значения, прямо сейчас он ОЧЕНЬ взломан вместе).

В Chrome, Safari и Firefox 10 это показало полную диаграмму, как ожидалось, которая заняла весь белый ящик. Однако в более поздних версиях Firefox (в частности, 15) верхние 200 или около того пикселей SVG-рендеринга, а затем остальные обрезаются.

Когда я открываю страницу в Firebug, я могу выделить элементы HTML, и кажется, что они все там, как будто какая-то большая белая коробка покрывает нижние 75% моей диаграммы (нет любой такой HTML-элемент, хотя). Я нажимаю события на точках, и те, которые отображаются, я могу щелкнуть, но те, которые я не могу найти, но на них ничего не делают.

Я исправил проблему, написав

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

Почему эта работа и что произошло?

Ответ 1

Что случилось, так это то, что спецификация того, как svg sizing должна работать, выяснилась, поэтому в разных случаях она работает лучше, а Firefox обновлен для отслеживания обновленной спецификации. В частности, <svg> теперь отличается тем же способом, что и другие элементы, заменяемые CSS, вместо того, чтобы пытаться использовать объекты автоматической магии, которые не срабатывают во всех ситуациях.

И, в частности, раньше было, что отсутствие атрибутов ширины и высоты рассматривалось как эквивалент, равный их 100%, за исключением того, что на самом деле он не играл хорошо, фактически устанавливая ширину или высоту в CSS и были некоторые другие проблемы. Итак, теперь поведение заключается в том, что если вы задаете ширину и высоту, то обрабатываются как презентационные подсказки (так же, как атрибуты ширины и высоты для <img>), и если вы этого не сделаете, вы получите стандартную размерность по умолчанию 300x150, которую вы затем можете переопределить с помощью по желанию.

Ответ 2

Я также столкнулся с той же проблемой

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

работал у меня.

Ответ 3

В firefox вам нужно определить, какие единицы вы используете: px, % и т.д.

поэтому для меня не работало следующее:

var width = 800,
    height = 600;

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

но было выполнено следующее:

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

Ответ 4

Любопытно, что "100%" работали на ширину, но не на высоту. Я закончил установку как innerWidth/innerHeight. Firefox 31.0 на CentOS6. FYI

Ответ 5

Также дважды проверьте и убедитесь, что вы не используете имена переменных, такие как innerWidth или outerHeight. Это была проблема в моем случае. IE9 и Chrome делают это хорошо, но Firefox (33.0) сходит с ума - может быть, ошибка.