Высота SVG неправильно рассчитана в браузерах Webkit

Question

У меня есть проблема, специфичная для браузеров Webkit (Safari & Chrome, на Mac и ПК).

Я использую Raphael JS для рендеринга данных SVG и адаптивный макет для масштабирования SVG с помощью браузераокно.SVG установлены на 100% ширину / высоту с использованием JQuery.Ширина содержащихся элементов установлена ​​в процентах для поддержания соотношений макета при изменении размера страницы.

Проблема в том, что Webkit неправильно вычисляет высоту, он добавляет дополнительные пиксели (иногда сотни) вокруг изображения SVG;что нарушает макет.

Если вы откроете следующую ссылку в браузере Webkit, вы увидите зеленые дополнительные области пикселей.Если вы используете inpspector для разработчиков в Safari, вы увидите, что сообщаемый размер SVG больше отображаемого SVG.

http://e -st.glam.ac.uk / Simulationgames / svgheightbug /index.html

Если вы откроете ссылку в Firefox или Opera, вы увидите макет, как он должен работать (зеленый здесь вызван полями, которые я специально установил).

В IE8 была похожая проблема, связанная с использованием height: автоматическое исправление, но в Webkit это не работает.

У кого-нибудь еще была эта проблема?У кого-нибудь есть решение?

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

Answer 1

svg { max-height: 100%; }

Ошибка WebKit, задокументированная здесь: https://bugs.webkit.org/show_bug.cgi?id=82489

Я также добавил обходной путь к трекеру ошибок.

Answer 2

У меня была похожая проблема для Safari. Дело в том, что ширина и высота svg отображались как атрибуты элемента dom (в моем случае width = "588.75px" height = "130px"). Определение ширины и высоты в css не может перезаписать этот параметр размера.

Чтобы исправить это для Safari, я удалил информацию о ширине и высоте из файла SVG, сохранив при этом viewBox без изменений (вы можете редактировать файлы .svg в любом текстовом редакторе).

Фрагмент Git diff моего .svg файла:

    xmlns:svg="http://www.w3.org/2000/svg"
    xmlns="http://www.w3.org/2000/svg"
    viewBox="0 0 588.75 130"
-   height="130"
-   width="588.75"
    xml:space="preserve"
    version="1.1"

Answer 3

У меня была проблема с возвращением Javascript неверных значений "высоты" для SVG, и я обнаружил, что решение было просто запустить мой скрипт (бит, который необходим для доступа к высоте) на window.load вместо document.ready.

document.ready срабатывает, когда DOM готов, но на этом этапе изображения не обязательно отображаются.В момент срабатывания window.load изображения будут загружены (и, следовательно, браузер сможет правильно получить доступ к их размерам).

Answer 4

Я обнаружил, что добавление "position: absolute;" к элементу изображения (если он находится внутри родителя, который также абсолютно позиционирован), которому был вызван мой .svg, сделали "height: 100%;" объявление становится относительно его контейнера вместо страницы / браузера / устройства.

Протестировал это на Chrome и Safari (мобильный веб-набор) для iOS 7.1, и это исправило мою проблему (файл .svg выходил далеко за пределы своего контейнера).

Надеюсь, это несколько надежное исправление для других здесь, у которых были проблемы. Стоит выстрел?

Answer 5

Я просто установил высоту на очень большой размер в SVG, чтобы сохранить соотношение сторон.Использование 100% сопряжено со слишком многими проблемами.Это работает лучше для меня, потому что я не хотел использовать js.

Полный реквизит для: http://www.seowarp.com/blog/2011/06/svg-scaling-problems-in-ie9-and-other-browsers/

width = "1200" height = "235.5"

Answer 6

Как указывалось ранее, масштабирование SVG в WebKit недавно улучшилось. На мой взгляд, в текущем Safari (версия 5.1, WebKit 534) он все еще не работает. Я провел несколько экспериментов и записал свои выводы на моем сайте: http://www.vlado -do.de / svg_test / Вкратце: встраивание svg с в большинстве случаев работает в WebKit 535. В более старых версиях WebKit я встраивал его в тег . Это нормально, если вам не нужны ссылки внутри вашего svg (но он не работает в старых Gecko и, как ни странно, проблематичен в текущем Chromium).

Answer 7

я знаю, как это исправить, вы просто должны поместить это в начало вашего файла SVG: "preserveAspectRatio =" xMinYMin none ", оно должно быть в теге SVG, например:

Проблема будет исправлена

Answer 8

Это известная проблема, исправленная командой Chromium с версией 15.0.874.121. Я сам проверил это исправление только сегодня.

http://code.google.com/p/chromium/issues/detail?id=98951#c27

Answer 9

Мне трудно понять, что именно вы хотите с вашим примером, а что нет, как вы этого предполагали.Однако, как правило, если вы используете макет с контейнерами в процентах ширины и высоты и хотите, чтобы содержимое заполняло эти контейнеры, вам нужно вывести их из потока (используя position:absolute для содержимого и position:relative или * 1003).* на контейнерах).

Вот простой пример, который работает найти в Chrome и Safari:
http://phrogz.net/SVG/size-to-fill.xhtml

Div #foo имеет свою высоту и ширину в процентах оттело.Он имеет красный фон, который никогда не будет виден, потому что SVG находится внутри position:absolute и настроен на его полное заполнение, и имеет зеленый фон.Если вы когда-нибудь увидите красный, это ошибка.

#foo, svg { position:absolute }
#foo { left:20%; width:30%; top:5%; height:80%; background:red; }
svg  { top:0; left:0; width:100%; height:100%;  background:green; }

<div id="foo"><svg ...></svg></div>