ios - 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 中，我使用以下代码附加模式 ID。请看下面:

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

我已经做了一些挖掘，发现 FireFox 和 iOS Safari 不支持这种技术(图像作为 SVG 背景)。因此，我在 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 除外。所以我的问题主要是我不知道如何针对那些不支持的浏览器，我确信这些浏览器比我目前正在测试的要多。所以...我决定使用 Modernizr 来寻求支持，但我似乎找不到合适的、有代表性的方法来检查是否支持这种 SVG 技术。换句话说，在这个页面上:https://modernizr.com/download?setclasses , 我找不到适合我的问题的浏览器功能。

我希望有人知道我可以最好或更好地研究哪个方向，对这种技术有一些经验，我仍然认为它非常棒(如果它有效)。

提前谢谢大家!

Answer 1

我通过在标记中使用不同的方法找到了解决方案。我没有使用 defs 和 gs，而是使用以下标记来实现相同的效果:

<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 样式。

希望这对某人有帮助!