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样式作为文本本身。

希望这有助于某人！

SVG填充图像源

1 个答案: