正文 

当前位置： 首页 > 问答 >

自定义字体未在用作背景图像的 SVG 模式中显示

     2023-03-06     118

关键词：

【中文标题】自定义字体未在用作背景图像的 SVG 模式中显示【英文标题】：Custom font not displaying in SVG pattern used as background-image 【发布时间】：2014-09-07 09:18:30 【问题描述】：

我正在使用一种使用自定义字体的 SVG 模式，以便在 HTML 页面上使用该模式作为背景图像。

在 Chrome 和 Safari 中一切正常，但在 Firefox 中开始变得有趣：

当我打开 SVG 文件本身时，Firefox 可以很好地呈现 SVG 和自定义字体文本（到目前为止一切都很好！）； 但是，当同一个 SVG 文件用作 HTML 元素的背景时，Firefox 确实不呈现自定义字体 (!)

我已经花了几个小时试图找出问题所在，欢迎换一双眼睛。

简而言之：

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/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink"  >
    <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"   />
        </g>

        <!-- Patterns with Text -->
        <pattern id="pattern" x="0" y="0"   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"   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>

HTML 本身并不重要，但我在下面链接了它。 我最终没有生成 jsfiddle，因为我无法在其中托管 SVG 文件。

（在演示之外，这里的实际应用程序是我想使用自定义字体来显示音标。（作为背景图像，以帮助人们学习它们。）在 SVG 中这样做可以省去我每当我对设计进行更改时，都可以导出到位图。）

【问题讨论】：

从 Firefox 46.0.1（或者更早的版本）开始，问题就消失了。 【参考方案1】：

您在图像上下文中使用 SVG。 IE。通过 html &lt;img&gt; 标签、SVG &lt;image&gt; 标签或在您的情况下作为背景图像。

在 Firefox 中（并且可能在某些时候在其他 UA 中）图像必须仅包含单个文件。图像文件 (pattern-google.svg) 之外的任何数据都将被忽略。如果您直接显示 SVG，则会加载/使用外部数据。

那你能做什么...

将数据加载为data URI。 IE。 base64 编码 http://fonts.googleapis.com/css?family=Indie+Flower 但在执行此操作之前请阅读最后一段，然后将该数据直接粘贴到 svg 文件本身中。

所以导入看起来像这样......

@import url('data:text/css;base64,whatever the base 64 encoded data looks like...')

但请务必小心，因为http://fonts.googleapis.com/css?family=Indie+Flower 本身具有外部数据，因此数据本身必须被编码为数据 URI。 IE。你必须一直走到兔子洞。并按照我在下面的草图更改该文件。

@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');

完成后，您可以将整个文件编码为数据 URI 并@import。

所以，一步一步地重申......

    将http://themes.googleusercontent.com/static/fonts/indieflower/v5/10JVD_humAd5zP2yrFqw6nhCUOGz7vYGh680lGh-uXM.woff 转换为数据URI 将 http://fonts.googleapis.com/css?family=Indie+Flower 替换为具有步骤 1 中数据 URI 的版本 将步骤 2 中的文件转换为数据 URI @import 步骤 3 中的数据 URI

有很多在线网站会创建数据 URI。

【讨论】：

UIImageView 未在自定义 UITableViewCell 中显示图像

】UIImageView未在自定义UITableViewCell中显示图像【英文标题】：UIImageViewnotshowingimageincustomUITableViewCell【发布时间】：2014-11-2111:21:55【问题描述】：UIImageView没有在我的自定义UITableViewCell中显示图像。不知道为什么，我尝试了在Interfa... 查看详情

recharts img 未在自定义点中呈现

】rechartsimg未在自定义点中呈现【英文标题】：rechartsimgnotrenderingincustomizeddot【发布时间】：2019-06-1819:40:32【问题描述】：我想将来自URL的图像呈现为折线图的点。我添加了文档中显示的“CharacterDot”，但它没有呈现任何内容。... 查看详情

带有内部图像的 Svg 未在 Safari 中显示

】带有内部图像的Svg未在Safari中显示【英文标题】：Svgwithimageinsideisnotshowinginsafari【发布时间】：2014-01-0318:56:33【问题描述】：在我的网站中，我嵌入了一些svg。它们似乎都可以在Chrome、Firefox、IE(9+)和Safari中正常工作。但是，只... 查看详情

用作背景图像的 SVG 会丢失嵌入图像？

】用作背景图像的SVG会丢失嵌入图像？【英文标题】：SVGusedasbackground-imagelosesembedimages?【发布时间】：2012-09-1220:37:59【问题描述】：我将svg用作响应式布局的背景图像，以在线格式重新创建复杂的小册子。一切都适用于矢量对象... 查看详情

CSS 大纲属性未在 Firefox 中显示为 SVG 图像？

】CSS大纲属性未在Firefox中显示为SVG图像？【英文标题】：CSSoutlinepropertynotshowinginFirefoxforSVGimage?【发布时间】：2012-11-0311:34:08【问题描述】：我正在尝试设计一种使用SVG画布（整个应用程序使用d3）和画布上绘制的图像元素的交... 查看详情

如何更改用作背景图像的svg的颜色[重复]

】如何更改用作背景图像的svg的颜色[重复]【英文标题】：howtochangethecolorofansvgwhichisusedasabackgroundimage[duplicate]【发布时间】：2017-03-2501:16:22【问题描述】：我想为svg（lotos花）使用不同的颜色。假设名为TOPS的收件箱为绿色，LOUNGE... 查看详情

如何获得旋转的线性渐变 svg 用作背景图像？

】如何获得旋转的线性渐变svg用作背景图像？【英文标题】：Howtogetarotatedlineargradientsvgforuseasabackgroundimage?【发布时间】：2012-02-1923:49:26【问题描述】：我已经看到了一些围绕这个问题的问题，所以我希望这不是太多余。理想情... 查看详情

如何在用作背景图像的外部 SVG 文件中设置路径元素的样式？

】如何在用作背景图像的外部SVG文件中设置路径元素的样式？【英文标题】：HowtostylepathelementinanexternalSVGfileusedasbackgroundimage?【发布时间】：2013-01-1000:44:54【问题描述】：我有一个div，在我的CSS中分配了一个背景图像。它是一个s... 查看详情

如何使带有自定义背景图像的按钮在Android中显示点击动画

】如何使带有自定义背景图像的按钮在Android中显示点击动画【英文标题】：HowtomakebuttonwithcustombackgroundimageshowclickanimationinAndroid【发布时间】：2011-02-0817:07:45【问题描述】：对于在Android中使用自定义背景图像的按钮，如何使按钮... 查看详情

深色主题未在我的 Android 应用中显示表格值

...方案1】：我发现了这个问题。我在表格布局中使用了自定义样式，并将自定义表格边框的背景颜色设置为白色。 查看详情

用作 base-64 背景图像数据时如何更改 svg 填充颜色？

】用作base-64背景图像数据时如何更改svg填充颜色？【英文标题】：howtochangesvgfillcolorwhenusedasbase-64backgroundimagedata?【发布时间】：2014-04-1813:26:11【问题描述】：我在一个项目中使用SVG，像这样在css中加载：background-image:url(\'data:imag... 查看详情

背景图像未在样式化组件中显示

】背景图像未在样式化组件中显示【英文标题】：BackgroundimageisnotshowinginStyledComponents【发布时间】：2020-12-2302:54:24【问题描述】：我正在开发一个电子商务应用程序。我试图在我商店中的商品上显示叠加层SoldOut。这是我的样式... 查看详情

如何将svg设置为背景图像[重复]

...图像使用.svg。我的问题是-有没有办法使用css样式表将.svg用作背景图像并保持其自适应和缩放。我希望能够使用媒体查询来使网站的移动部分更小，图像更少。olny的问题是，我希 查看详情

SVG 图像未在 Chrome 上加载（有时）

】SVG图像未在Chrome上加载（有时）【英文标题】：SVGimagesnotloadingonChrome(sometimes)【发布时间】：2016-01-1720:58:35【问题描述】：您好，我已经开始将我的很多网站旧图像转换为SVG格式，但我无法让它们显示在页面中。如果我单独打... 查看详情

某些资产图像未在 Ionic 应用程序中显示

】某些资产图像未在Ionic应用程序中显示【英文标题】：SomeassetImagesarenotshowinginIonicapp【发布时间】：2020-05-2817:13:39【问题描述】：我正在为android和Ios开发ionic4应用程序，我有不同格式的图像，如svg和png格式。但是，在幻灯片菜... 查看详情

自定义 SVG 未加载到我的图像标签中

】自定义SVG未加载到我的图像标签中【英文标题】：CustomSVGisnotloadinginmyimagetag【发布时间】：2021-10-2809:58:10【问题描述】：目前我正在尝试在图像标签内加载我的自定义svg组件。但由于某种原因，我无法看到地图组件内的svg图像... 查看详情

SVG 内联 CSS 未在 Internet Explorer 中显示

】SVG内联CSS未在InternetExplorer中显示【英文标题】：SVGinlineCSSnotdisplayingininternetexplorer【发布时间】：2015-02-0322:10:36【问题描述】：关于***的第一个问题，希望它不是太愚蠢。我一直在尝试找出一种方法来显示带有拆分事件日的日... 查看详情

UITableViewCell 自定义按钮图像未在 Swift 3 中更新

】UITableViewCell自定义按钮图像未在Swift3中更新【英文标题】：UITableViewCellcustombuttonimagenotupdatinginSwift3【发布时间】：2017-05-2410:44:01【问题描述】：我的单元格中有三个按钮链接、分享和收藏。我已经在我的自定义单元类中手动设... 查看详情