Возврат для источника изображения SVG

Question

Я изучаю изображение как заполнение SVG. Я в настоящее время с помощью следующей SVG разметки:

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="logo" x="0px" y="0px" viewBox="0 0 200 25" enable-background="new 0 0 0 0" xml:space="preserve"> 
<defs> 
    <pattern id="bg" patternUnits="userSpaceOnUse" width="300" height="25"> 
     <image xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="..." preserveAspectRatio="xMidYMid slice"></image> 
    </pattern> 
</defs> 
<g class="graphic"> 
    <path d="..."></path> 
</g> 

(я оставил некоторые подробности из («...»), из которых, я уверен, не имеют отношения к моему вопросу.)

В CSS я использую следующий код для добавления идентификатора шаблона. Pls см ниже:

.default-header .site-name svg.logo .graphic { 
    fill:url(#bg); 
} 

Я уже сделал некоторые раскопки и обнаружил, что этот метод (изображения как SVG фон) не поддерживается в FireFox и IOS Safari. Поэтому я использовал следующий метод «откате» в CSS:

.default-header .site-name svg.logo .graphic { 
    fill:#ddd; 
} 

@supports (-webkit-appearance:none) { 

    .default-header .site-name svg.logo .graphic { 
     fill:url(#bg); 
    } 
} 

Приведенный выше код работает, за исключением IOS 8/9 в Safari. Поэтому моя проблема в основном заключается в том, что я не знаю, как настроить таргетинг на эти не поддерживающие браузеры, и я уверен, что их больше, чем сейчас. SO ... Я решил использовать Modernizr для поиска поддержки, но я не могу найти подходящий, репрезентативный способ проверить, поддерживается ли эта технология SVG. Другими словами, на этой странице: https://modernizr.com/download?setclasses, я не могу найти функцию браузера, соответствующую моей проблеме.

Надеюсь, что кто-то знает, в каком направлении я мог бы лучше всего смотреть или лучше, но имеет некоторый опыт работы с этой техникой, которую я все еще считаю такой замечательной (если она работает).

Спасибо заранее, ребята!

Answer 1

Я нашел решение, используя другой подход в разметке. Вместо того чтобы использовать DEFS и ОШ, я использовал следующую разметку для достижения того же эффекта:

<svg id="graphic" width="300" height="40"> 
    <!-- Graphic: Styling (inline as FF fix) --> 
    <style> svg image { clip-path:url(#clipping); } </style> 
    <!-- Clip Path --> 
    <clipPath id="clipping"> 
     <!-- this might as well be any type of path --> 
     <text id="graphicText" x="0" y="37">My Text</text> 
    </clipPath> 
    <!-- Image --> 
    <image id="graphicImage" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="{img_url}" width="300" height="300" x="0" y="-120px"></image> 
</svg> 

я использовал CSS стиль для самого текста.

Надеюсь, это поможет кому-то!