自定义字体不会以用作背景图像的SVG模式显示 [英] Custom font not displaying in SVG pattern used as background-image
问题描述
我正在使用使用自定义字体的SVG模式，以便在HTML页面上使用模式作为背景图像。
在Chrome和Safari浏览器中，所有内容都可以正常显示，但在Firefox中开始变得有趣： b
$ b
以隔离这个问题，并欢迎新的一双眼睛。
点击这里查看 该问题的最小演示。
<以下是我简要介绍的内容：
CSS：
@import url（http://fonts.googleapis.com/css?family=Indie+Flower）;
body {
background：url（pattern-google.svg）;
SVG文件：
< svg xmlns =http://www.w3.org/2000/svgversion =1.1xmlns：xlink =http： //www.w3.org/1999/xlinkheight =200width =200>
< style type =text / css> @import url（http://fonts.googleapis.com/css?family=Indie+Flower）;< / style>
< defs>
<！ - 几何 - >
< g>
< rect id =squarex =0y =0width =200height =200/>
< / g>
<！ - 带文字的图案 - >
< text x =00y =00fill =＃777> S< / text>
< text x =40y =00fill =＃777> S< / text>
< text x =20y =20fill =＃777> S< / text>
< text x =00y =40fill =＃777> S< / text>
< text x =40y =40fill =＃777> S< / text>
< / pattern>
< / defs>
<！ - 图形 - >
< use xlink：href =＃squaretransform =translate（0，0）fill =url（#pattern）/>
< / svg>
HTML本身并不重要，但我已将它链接到下面。
我最终没有生成jsfiddle，因为我无法在那里托管SVG文件。
（演示之外，真实世界的应用程序在这里是我想使用自定义字体来显示拼音符号（作为背景图片，以帮助人们学习）。在SVG中这样做可以节省我在设计上进行更改时导出到位图的麻烦。）
感谢您的帮助。
。即可以通过html < img> 标签，SVG < image> 标签，或者作为背景图片。
在Firefox中（并且在某些时候可能在其他UA中）图片必须仅包含一个文件。图像文件外部的任何数据（pattern-google.svg）都会被忽略。如果你直接显示SVG，那么外部数据会被加载/使用。
那么你能做什么......
将数据加载为数据URI 。即base64 encode http://fonts.googleapis.com/css?family=Indie+Flower ，但在执行此操作之前先阅读最后一段，然后将这些数据直接粘贴到svg文件本身。
看起来像这样...
pre $ @ $ c $ @ @import url（'data：text / css; base64，无论base 64编码数据的外观如何像...'）
请小心，因为 http://fonts.googleapis.com/css?family=Indie+Flower 本身具有外部数据，因此数据本身必须本身被编码为数据URI。即你必须一路走下兔子洞。
@ font-face {
font-family：'独立花';
font-style：normal;
font-weight：400;
src：local（'Indie Flower'），local（'IndieFlower'），url（在将整个文件转换为数据URI **之前，也将该文件转换为数据URI）格式（'woff ）;
}
完成后，您可以将整个文件编码为数据URI和@import它。
所以，要一步一步重申......
- 转换 http://themes.googleusercontent.com/静态/字体/ indieflower / v5 / 10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff 转换为数据URI
- 替换 http://fonts.googleapis.com/css?family=Indie+Flower 与第1步中具有数据URI的版本
- 将步骤2中的文件转换为数据URI
- @导入步骤3中的数据URI
- @导入步骤3中的数据URI
网上有很多网站会创建数据URI。
I'm working with an SVG pattern that uses a custom font, so as to use that pattern as a background image on an HTML page.
Everything renders fine in Chrome and Safari but it starts to get funny in Firefox:
- Firefox renders the SVG along with the custom font text just fine when I open the SVG file itself (so far so good!);
- However, Firefox does NOT render the custom font anymore when that same SVG file is used as the background to an HTML element (!)
I've spent hours trying to isolate the issue and a fresh pair of eyes would be welcome.
Click here to see the minimal demo of the issue.
Here's what I've got in short:
CSS:
@import url(http://fonts.googleapis.com/css?family=Indie+Flower);
body {
background: url(pattern-google.svg);
}
SVG file:
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" height="200" width="200">
<style type="text/css">@import url(http://fonts.googleapis.com/css?family=Indie+Flower);</style>
<defs>
<!-- Geometry -->
<g>
<rect id="square" x="0" y="0" width="200" height="200" />
</g>
<!-- Patterns with Text -->
<pattern id="pattern" x="0" y="0" width="40" height="40" patternUnits="userSpaceOnUse" text-anchor="middle" font-size="20" font-family="Indie Flower, sans-serif" style="font-family: Indie Flower, sans-serif;">
<rect x="00" y="00" width="40" height="40" fill="transparent" />
<text x="00" y="00" fill="#777">S</text>
<text x="40" y="00" fill="#777">S</text>
<text x="20" y="20" fill="#777">S</text>
<text x="00" y="40" fill="#777">S</text>
<text x="40" y="40" fill="#777">S</text>
</pattern>
</defs>
<!-- Graphics -->
<use xlink:href="#square" transform="translate(0, 0)" fill="url(#pattern)"/>
</svg>
The HTML itself does not really matter but I've linked it below. I did not produce a jsfiddle in the end because I could not host the SVG file there.
(Outside of the demo, the real-world application here is that I want to use a custom font to display phonetic symbols. (As background image, to help people learn them.) Doing so in SVG saves me the hassle to export to bitmap anytime I make a change in design.)
Thanks for the help.
You are using SVG in an image context. I.e. either via the html <img> tag, the SVG <image> tag or in your case as a background image.
In Firefox (and likely in other UAs at some point) images must consist of a single file only. Any data external to the image file (pattern-google.svg) is ignored. If you display the SVG directly then external data is loaded/used.
So what can you do...
Load the data as a data URI. I.e. base64 encode http://fonts.googleapis.com/css?family=Indie+Flower but read the final paragraph before you do this and then stick that data directly in the svg file itself.
So the import would look like this...
@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')
Do be careful though because http://fonts.googleapis.com/css?family=Indie+Flower itself has external data so that data itself must itself be encoded as a data URI. I.e. you must go all the way down the rabbit hole. And change that file as I've sketched out below.
@font-face {
font-family: 'Indie Flower';
font-style: normal;
font-weight: 400;
src: local('Indie Flower'), local('IndieFlower'), url(**convert this file to a data URI too before you convert the whole file to a data URI**) format('woff');
}
Once you've done that you can then encode the whole file as a data URI and @import it.
So, to reiterate step by step...
- Convert http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff to a data URI
- Replace http://fonts.googleapis.com/css?family=Indie+Flower with a version that has the data URI from step 1
- Convert the file in step 2 to a data URI
- @import the data URI from step 3
There are plenty of sites online that will create data URIs.
这篇关于自定义字体不会以用作背景图像的SVG模式显示的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
