Линейный градиент SVG не работает в Safari

У меня есть объект SVG, который содержит линейный градиент, встроенный непосредственно в документ. Он отлично работает в Chrome и Firefox, но в Safari ничего не отображается. Если я создаю SVG как файл и внедряю его, используя тег Object, он отлично работает в Safari. Другие формы и заливки работают, это просто линейный градиент, который не работает. Я думаю, я мог бы использовать объект, но я бы предпочел встроить SVG напрямую.

Я создал демо здесь (работает в Chrome, а не Safari): http://jsfiddle.net/sjKbN/

Я наткнулся на этот ответ, который предлагает установить тип контента в application/xhtml+xml, но это само по себе, кажется, вызывает другие проблемы.

Просто интересно, сталкивался ли кто-нибудь с какими-либо другими исправлениями или идеями, чтобы заставить это работать.

Источник

5 ответов

Решение

Ваш градиент будет работать в Safari, если вы оберните defs отметьте это:

<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
     width="300px" height="300px" viewBox="0 0 300 300" enable-background="new 0 0 300 300" xml:space="preserve">
 <defs>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="5.6665" y1="149.5" x2="293.333" y2="149.5">
    <stop  offset="0" style="stop-color:#FFF33B"/>
    <stop  offset="0.0595" style="stop-color:#FFE029"/>
    <stop  offset="0.1303" style="stop-color:#FFD218"/>
    <stop  offset="0.2032" style="stop-color:#FEC90F"/>
    <stop  offset="0.2809" style="stop-color:#FDC70C"/>
    <stop  offset="0.6685" style="stop-color:#F3903F"/>
    <stop  offset="0.8876" style="stop-color:#ED683C"/>
    <stop  offset="1" style="stop-color:#E93E3A"/>
</linearGradient>
</defs>
<rect x="5.667" y="5.333" fill="url(#SVGID_1_)" width="287.667" height="288.333"/>
</svg>

Кажется, что обернуть ваши ссылки в defs рекомендуется, но не обязательно в соответствии со спецификацией. Так что это ошибка в Safari.

Источник

Об альфа: Кажется, что Safari (7 на данный момент) не покрывает цветной альфа-канал SVG, используйте атрибут stop opacity. работает отлично!

<stop stop-color="rgba(x,y,z,0.5)"> //safari does not work
<stop stop-color="rgb(x,y,z)" stop-opacity="0.5"> //ok
Источник

Принятый ответ не был решением для меня.

Моей проблемой было присутствие <base href="/" /> тег в моем файле индекса. Простое удаление решило проблему для меня.

Если вы не можете удалить его, возможно, какой-то обходной путь уже существует: нашел этот смысл, но я не проверял его.

Обновить

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

get svgFill(): string {
  return `url(${this.location.path()}#${this.gradientId}) white`;
}
Источник

Ответ прост, все <linear gradient> id должен быть УНИКАЛЬНЫМ для всех файлов SVG.

Источник

У меня тоже были проблемы с созданием встроенного SVG с линейным градиентом. Дизайнер поставил - в идентификаторе <linearGradient. Решение было таким же простым, как его удаление.

      <linearGradient id="linear-gradient">
...
<path fill="url(#linear-gradient)" d="..."/>

с

      <linearGradient id="lineargradient">
...
<path fill="url(#lineargradient)" d="..."/>
Источник
Другие вопросы по тегам