SVG градиент на внутренних страницах и тег BASE

257

12 декабря 2018, 01:30

Есть svg градиент, который применяется на всех страницах сайта:

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="0" height="0" style="position: absolute;" xml:base="">
<defs>
    <radialgradient cx="19.111" cy="128.444" gradientunits="userSpaceOnUse" id="instagram-gradient" r="163.552">
        <stop offset="0" stop-color="#ffb140"/><stop offset=".256" stop-color="#ff5445"/>
        <stop offset=".599" stop-color="#fc2b82"/><stop offset="1" stop-color="#8e40b7"/>
   </radialgradient>
</defs>

далее его применяю на USE

<svg><use xlink:href="#sprite-in" fill="url(#instagram-gradient)"/></svg>

Но если на странице присутствует тег <base> то градиент работает только на главной странице. На внутренних градиент теряется.

Эта проблема наблюдается в Safari (десктоп/мобайл), в хроме все ок.

Сталкивался кто нибудь с таким?

Answer 1

Одной из причин отказа работоспособности градиента может быть:

У вас для градиента значения указаны stop offset=".599" в долях от единицы, поэтому gradientunits должен иметь значение - gradientunits= "objectBoundingBox" или не указывать, так как это значение по умолчанию.
Для кроссбраузерности лучше добавлять градиент в каждый фрагмент svg кода, который вы окрашиваете.

Попробуйте добавить фрагмент кода с градиентом через <object>

<object type="image/svg+xml" data="images/svgdefs.svg"> Your browser does not support SVG </object>

Далее вызываете градиент по ID

<svg class="inline-svg-icon"> <use xlink:href="svgdefs.svg#instagram-gradient"></use> </svg>

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Верстка адаптивного меню

В данный момент верстаю адаптивное меню, и у меня возникла проблемаТо есть, мои ссылки белого цвета (когда страница в разрешении 980px), но когда...

181

c# как дать юзеру создавать класс

есть базовый класс Storage от него наследуется Usb, Dvd, Hdd есть отдельный класс User он может создавать классы Usb, Dvd, Hdd и манипулировать с методами...

212

Какой использовать тип для работы с числами размером до 128 бит?

Мне нужен тип, который позволял бы работать с крупными числами (до 128 бит)Что-то типа BigInteger, но с плавающей точкой

216

Автосвойства и рекурсия

Есть вот такой синтаксический сахар, как авто-свойство, когда за кулисами при компиляции создается поле

248