Изображение внутри контура SVG в Safari отображается черным - PullRequest
Новая
       21

Изображение внутри контура SVG в Safari отображается черным

0 голосов
/ 03 ноября 2018

У меня действительно странная ошибка в Safari. У меня есть изображение внутри контура SVG, вот код: 

<svg viewBox="0 0 367 367" height="367" width="367" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <defs>
        <pattern id="bias" height="100%" width="100%" patternContentUnits="objectBoundingBox" viewBox="0 0 1 1" preserveAspectRatio="xMidYMid slice">
            <image height="1" width="1" preserveAspectRatio="xMidYMid slice" xlink:href="https://upload.wikimedia.org/wikipedia/commons/c/cb/ADAC-Zentrale%2C_Munich%2C_March_2017-01.jpg"/>
        </pattern>
    </defs>
    <path d="M0,183.5 L0,0 L183.5,0 C284.844252,0 367,82.1557484 367,183.5 C367,284.844252 284.844252,367 183.5,367 C82.1557484,367 0,284.844252 0,183.5 Z" fill="url(#bias)"></path>
</svg>

Изображение хорошо отображается на домашней странице, но тот же код на всех других страницах отображает фигуру как черный, а изображение отсутствует, хотя в инспекторе я вижу, что изображение загружено. У всех остальных браузеров все нормально.

Левая форма - это пример правильного рендеринга на домашней странице, а правая - как на всех остальных страницах. Тот же шаблон, тот же код. svg shapes

Есть идеи? Спасибо, что вырывал мои волосы часами, спасибо.

1 Ответ

0 голосов
/ 06 ноября 2018

Оказывается, это был тег <base> в заголовке, связанный с относительным URL.

Проблема, аналогичная этой проблеме Градиент SVG становится черным, когда на странице HTML есть тег BASE?

Спасибо

...