我正在研究使用图像作为 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 , 我找不到适合我的问题的浏览器功能。
我希望有人知道我可以最好或更好地研究哪个方向,对这种技术有一些经验,我仍然认为它非常棒(如果它有效)。
提前谢谢大家!
最佳答案
我通过在标记中使用不同的方法找到了解决方案。我没有使用 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 样式。
希望这对某人有帮助!
关于ios - SVG 填充图像源的回退,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36499287/