Safari SVG Linear Gradient не работает в Safari

Может кто-нибудь сказать мне, почему линейный градиент в элементе svg в верхнем и нижнем колонтитулах не работает в Safari на этом сайт? Одно из возможных решений, которое я нашел в Интернете, заключалось в том, чтобы обернуть градиент тегом <defs>, который в этом случае не помог.

html css svg

15.07.2018 19:38

Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer

В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...

Введение в CSS

CSS является неотъемлемой частью трех основных составляющих front-end веб-разработки.

Как выровнять Div по центру?

Чтобы выровнять элемент <div>по горизонтали и вертикали с помощью CSS, можно использовать комбинацию свойств и значений CSS. Вот несколько методов,...

Навигация по приложениям React: Исчерпывающее руководство по React Router

React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...

Система управления парковками с использованием HTML, CSS и JavaScript

Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...

Toor - Ангулярный шаблон для бронирования путешествий

Toor - Travel Booking Angular Template один из лучших Travel & Tour booking template in the world. 30+ валидированных HTML5 страниц, которые помогут...

1 951

Ответы 1

Похоже, Safari не нравится тег <base>. Это останавливает работу заливки в этом браузере, поэтому вы получаете заливку по умолчанию, которая является черной.

например

html, body {
  width: 100%;
  height: 100%;
}

<base href = "http://emtre.ch.tajo.host.ch/" />
<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" id = "footer-svg" width = "100%" height = "100%" viewBox = "0 0 2000, 1200">

    <defs>
        <linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
            <stop offset = "0%" style = "stop-color:#efefef;stop-opacity:1"></stop>
            <stop offset = "100%" style = "stop-color:#FFF;stop-opacity:1"></stop>
        </linearGradient>
    </defs>
    <polygon points = "0,595 1903,0 1903,1010 0,1010" fill = "url(#grad1)"></polygon>
</svg>

против

html, body {
  width: 100%;
  height: 100%;
}

<svg xmlns = "http://www.w3.org/2000/svg" xmlns:xlink = "http://www.w3.org/1999/xlink" id = "footer-svg" width = "100%" height = "100%" viewBox = "0 0 2000, 1200">

    <defs>
        <linearGradient id = "grad1" x1 = "0%" y1 = "0%" x2 = "100%" y2 = "0%">
            <stop offset = "0%" style = "stop-color:#efefef;stop-opacity:1"></stop>
            <stop offset = "100%" style = "stop-color:#FFF;stop-opacity:1"></stop>
        </linearGradient>
    </defs>
    <polygon points = "0,595 1903,0 1903,1010 0,1010" fill = "url(#grad1)"></polygon>
</svg>

15.07.2018 23:33

Другие вопросы по теме

Держите вертикальную полосу прокрутки в фиксированном положении независимо от горизонтальной прокрутки

Как использовать переменную JavaScript в CSS?

Как изменить положение элементов html, используя только css?

Как я могу сделать свое изображение более заметным на мобильном телефоне

Почему размер div не меняется?

При установке высоты img с помощью vp это влияет на ширину элемента sibling, но с% это не так, почему?

Как уменьшить скорость прокрутки фонового изображения

Как настроить тег переноса строки?

Safari отображает только правую половину полноэкранного div

Div, выходящий за пределы HTML и тела

Safari SVG Linear Gradient не работает в Safari

Ответы 1

Другие вопросы по теме

Похожие вопросы