0
svg изображение не работает в сафари 5.1.7 (windows). Но когда я открываю изображение svg в сафари, а затем посещаю сайт, изображение отображается там.svg изображение не работает в сафари 5.1.7 (windows)
A
ответ
0
Safari на Windows, имеет проблемы расчета высоты реагирующих инлайн SVGs.
Вы можете попробовать intrinsic ratio технику, в котором вы расположите <svg> тег абсолютно внутри тега <object> с нижней прокладкой, равной отношению viewBox (или высота/ширина атрибутов) в SVG.
.my-responsive-svg {
width: 100%;
display: block;
height: auto;
position: relative;
/* for an svg with a 16:9 aspect ratio */
padding-top: 56.25%;
}
.my-responsive-svg svg {
width: 100%;
height: 100%;
position: absolute;
top: 0;
left: 0;
right: 0;
}<object class="my-responsive-svg">
<svg width="160" height="90" viewBox="0 0 160 90">
<rect x="10" y="10" width="140" height="70" />
</svg>
</object>Источник: Наконечник шляпы Сержиу Lopes, который комментировал this blog post.
Просьба уточнить, в чем проблема. Что означает «не работает»? Вы говорите «заходите на сайт» - какой сайт? –
Я разрабатываю сайт, на котором я использую svg-изображения, например,
. Теперь, когда я посещаю сайт в chrome, он отлично работает, но когда вы посещаете его в сафари, изображения svg там не отображаются. Но если я открою изображение svg в сафари, то его отобразится на сайте. –
Вы имеете в виду, если вы загружаете SVG напрямую (например, www.my.site/somefile.svg), то изображения, которые ранее не отображались, теперь начинают работать? –