Почему Chrome ограничивает мой рост: 100% SVG при уменьшении

Question

Chrome обрезает мою графику SVG при уменьшении масштаба. Firefox и IE 9 этого не делают.

Почему это происходит?

Вот пример js-fiddle . Там есть <div> с <svg> внутри,
а высота <svg> равна 100%.
Если вы уменьшите масштаб в Chrome, то вы заметите, что <svg> усекается, чем выше и выше над «Нижним», тем больше вы уменьшаете.

(Как мне этого избежать? Я думаю о том, чтобы запомнить максимальные значения x и y и явно установить ширину <svg>, похоже, это работает.)

Обновление

Теперь я нашел обходной путь: вычислите коэффициент масштабирования браузера и увеличьте каждый <svg> с обратным коэффициентом масштабирования - тогда они станут достаточно большими. Вот так:

if ($.browser.webkit) {
  // outerWidth is measured in screen pixels, innerWidth in CSS pixels.
  // So outerWidth / innerWidth is the zoom %.
  var invZoom = (window.innerWidth / window.outerWidth * 100) +'%';
  $('svg').css('width', invZoom).css('height', invZoom);
}

( Здесь - тема о расчете уровня масштабирования)

Мне все еще немного любопытно, почему Chrome делает это. Возможно, есть некоторые проблемы с пикселями экрана по сравнению с пикселями / размерами CSS.

Обновление: 2012-02-25

Теперь проблема больше не воспроизводима. Возможно, исправлена ​​ошибка, связанная с Chrome (?).

Answer 1

У меня была похожая проблема с SVG для адаптивного дизайна, над которым я работал.В итоге я удалил атрибуты высоты и ширины элемента SVG и установил их с помощью CSS.В моем SVG-элементе также есть атрибут viewBox и preserveAspectRatio = "xMidYMin meet".С этой настройкой я смог получить SVG-элемент, который динамически изменяет размер в зависимости от размера области просмотра.