Проблема с высотой окна просмотра SVG на ios Safari

При использовании svg я заметил странную вещь на ios. Как представляется, svgs отлично работает во всех других браузерах, но на Safari ipad/iphone в окне просмотра есть странное пространство вверху и внизу svg. Кто-нибудь еще сталкивался с этим, и смогли ли вы это исправить? Используя простой код svg, например:

<svg width="100%" viewBox="0 0 20 10">
    <polygon fill=red stroke-width=0 points="0,10 20,10 10,0" />
</svg>

На ipad/iphone, если я поставлю границу на svg там странное пространство выше и ниже svg...??

fiddle goodness выглядит нормально на рабочем столе, но если вы посмотрите на него на ipad и т.д., вы увидите проблемы.

http://jsfiddle.net/InVAMPED/hck5gg1a/

Ответ 1

Проблема в том, что вы устанавливаете только ширину, а не высоту окна макета SVG. Затем viewBox устанавливается внутри этого макета, используя стандартную настройку xMidYMid meet, которая масштабирует его только для того, чтобы соответствовать более ограниченному размеру и центрирует его в другом направлении.

Firefox и последние версии Chrome (и я думаю, что рабочий стол Safari также) масштабирует SVG, чтобы соответствовать пропорциям viewBox, когда вы оставляете одно измерение как auto. Тем не менее, другие браузеры будут применять высоту/ширину по умолчанию, а затем масштабируют изображение до соответствия:

IE применяет ширину 150px height/300px, которая по умолчанию используется для внедренных объектов.
Safari mobile должен применять старый webkit по умолчанию 100vh (высота окна браузера).

Это не "ошибка" в браузерах, а просто функция, которая никогда не была четко определена в спецификациях.

Найдите информацию о "прокладке нижнего соотношения сторон", чтобы заставить браузер соблюдать соотношение сторон, но при этом позволяя шире реагировать.

Ответ 2

AmeliaBR полностью прав, большое спасибо за то, что он вел меня в правильном направлении!

Вот что показал мне google: взломать нижний слой

Поскольку процентное значение для padding-bottom получает его высоту от ширины элемента, а не самую высоту, мы можем использовать это для создания чувствительных элементов без указанной высоты.

В контейнере SVG:

.container {
    padding-bottom: 70%; /*this is your height/width ratio*/
    height: 0;
  }

На самом элементе SVG:

.container svg {
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 100%;
}

Ответ 3

Для меня установка ширины и высоты на 100% для всех svgs сделала трюк:

svg {
    width: 100%;
    height: 100%;
}

Чувствует себя намного чище, чем прокладка.

Ответ 4

Это сработало для меня:

.mapContainer svg{
  max-height: 60vw; /* This will depend on the aspect ratio */
}

Вам необходимо установить max-height (в единицах vw), чтобы svg находился в пределах границ. Тогда это хорошо масштабируется везде. Обратите внимание, что max-height будет отличаться для разных SVG, в зависимости от соотношения сторон.