Fallback for SVG fill image source - ios

Question

I am looking into using an image as an SVG fill. I am currently using the following SVG markup:
<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>
(I have left some details out ("...") of which I am sure are not relevant to my issue.)
In CSS, I use the following code to append the pattern ID. Pls see below:
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
I've already done some digging and found out that this technique (images as SVG background) isn't supported in FireFox and iOS Safari. Therefore I used the following "fall-back" method in CSS:
.default-header .site-name svg.logo .graphic {
fill:#ddd;
}
#supports (-webkit-appearance:none) {
.default-header .site-name svg.logo .graphic {
fill:url(#bg);
}
}
The above code works, EXCEPT for iOS 8/9's Safari. So my issue is mainly that I don't know how to target those non-supporting browsers, which I'm sure there are more of than I am currently testing. SO... I decided to use Modernizr to look for support, but I can't seeem to find an appropriate, representational way of checking if this SVG technique is supported. In other words, on this page: https://modernizr.com/download?setclasses, I can't find the browser feature appropriate for my issue.
I hope somebody knows what direction I could best look into or better yet, has some experience with this technique, which I still think is so awesome (if it works).
Thanks in advance guys!

Answer 1

I found a solution by using a different approach in markup. Instead of using defs and gs, I used the following markup to achieve the same effect:
<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>
I used CSS styling for the text itself.
Hope this helps someone!