SVG viewbox height issue on ios Safari

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

<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/

источник

2014-09-29 user2541153

Если я добавлю высоту с помощью CSS, выпрямите все вместе, но мне нужно, чтобы это масштабировалось на ширине окна, сохраняя соотношение сторон. Из дальнейшего чтения это выглядит как ошибка в браузерах webkit некоторое время назад. Я не обновлял свой ipad через некоторое время, поэтому я думаю, что эта проблема может быть решена с помощью обновления браузера? – user2541153

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

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

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

На самом деле это не «ошибка» в браузерах, а функция, которая никогда не была четко определена в спецификациях.

Поиск информации о «прокладке нижнего соотношения сторон прокладки» для обеспечения того, чтобы браузер учитывал соотношение сторон, сохраняя при этом ширину реакции.

источник

2014-09-29 17:22:29 AmeliaBR

Я добавил атрибут 'preserveAspectRatio =" none "' к моему svg и установил высоту и ширину до 100% - теперь все хорошо. Возможно, стоит попробовать. – RSeidelsohn

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

Вот что Google показал мне: The padding-bottom hack

Поскольку процентное значение для 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%; 
}

источник

2015-01-07 16:58:49 undervers

Отличная сводка подлокотника (или -top). Но нет. Контейнеру нужна «позиция: относительная»? – nydame

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

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

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

источник

2016-06-02 14:37:25 alexrogins

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

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

Вам нужно установить максимальную-высоту (в единицах Vw) таким образом, что находится в пределах SVG границ. Тогда он хорошо осваивается повсюду. Обратите внимание, что максимальная высота будет различной для разных SVG, в зависимости от соотношения сторон.

источник

2018-03-09 11:12:20 peerless

SVG viewbox height issue on ios Safari

ответ

Смежные вопросы