Safari обработка URL (#location) в CSS? - PullRequest
Новая
       29

Safari обработка URL (#location) в CSS?

0 голосов
/ 18 января 2020

Мне интересно, сталкивался ли кто-нибудь с этой проблемой раньше и может ли указывать мне правильное направление? Я пытаюсь раскрасить иконки SVG с помощью градиента, определенного на самой странице. Когда я пытаюсь сослаться на градиент, он отлично работает в chrome, но ломается в iOS / safari.

Chrome отобразит стиль как url (#grad) где safari любит делать url (../ ../../whwhat/css/#grad)

Некоторая разметка: 

 <svg width="1em" class="svg-inline icon-grad" aria-hidden="true" focusable="false" role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32">
   <path d="M16 0.5c8.563 0 15.5 6.938 15.5 15.5s-6.938 15.5-15.5 15.5-15.5-6.938-15.5-15.5 6.938-15.5 15.5-15.5zM14.194 9.475l4.719 4.525h-11.412c-0.831 0-1.5 0.669-1.5 1.5v1c0 0.831 0.669 1.5 1.5 1.5h11.412l-4.719 4.525c-0.606 0.581-0.619 1.55-0.025 2.144l0.688 0.681c0.588 0.587 1.537 0.587 2.119 0l8.294-8.287c0.587-0.587 0.587-1.537 0-2.119l-8.294-8.3c-0.587-0.588-1.537-0.588-2.119 0l-0.688 0.681c-0.594 0.6-0.581 1.569 0.025 2.15z"></path>
 </svg>

Мой градиент также определен на странице: 

<svg width="0" height="0" style="display:block;">
        <linearGradient id="grad" x1="100%" y1="100%" x2="0%" y2="0%" >
            <stop offset="0%" style="stop-color:rgb(60,80,100);stop-opacity:1" />
            <stop offset="100%" style="stop-color:rgb(100,145,170);stop-opacity:1" />
        </linearGradient>
</svg>

CSS: 

.icon-grad * {fill: url(#grad);}

Chrome, кажется, справляется с этим просто отлично, но Safari выдает ошибку при замене на относительный URL. Я неправильно определяю сафари или есть обходной путь?

...