SVG数据图像作为CSS背景?

23
如何在CSS中将SVG数据图像设置为DIV背景?如果在HTML中使用<img src="data:image/svg+xml;base64,[data]">可以正常工作,但在CSS背景中不会显示。 我在CodePen上创建了一个示例,供您查看。所以我调查了这个问题,并发现其他一些SVG数据图像可以正常工作。
.frame__wrapper {
background: transparent url('data:image/svg+xml;base64,[data]') center top no-repeat;
background-size: 100% auto;
width: 310px;
height: 272px;
margin: 0 auto;
padding: 26px 10px;
}

这里是带有SVG图像的CodePen工作样例 我无法在此处粘贴编码后的SVG。

使用来自SVG data URIs教程的数据URI,我设定了CSS背景。但是Base64尚未显示。


1
https://css-tricks.com/probably-dont-base64-svg/ - sebasaenz
1
谢谢,但是像 SVG 代码一样它也不起作用:data:image/svg+xml;utf8,<svg ...> ... </svg> - Igors Maslakovs
我看到了这篇文章,它在那里运行得很好,有什么区别吗?http://codepen.io/anon/pen/rpfEz - Igors Maslakovs
如果我们看不到你的文件,我们怎么能告诉你它出了什么问题?请使用MCVE更新你的问题。 - Paul LeBeau
抱歉,Robert,我尝试在此处发布数据图像,但无法实现。因此,我在CodePen上发布了链接。其中包含数据图像和SVG文件。 - Igors Maslakovs
1个回答

18

以下是我使用SVG数据图像作为CSS背景的步骤:

  1. I encoded an image as base64
  2. I embedded this encoded image into svg markup

    <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="your width" height="your height" viewBox="0 0 your width your height">
    <image xlink:href="data:image/jpeg;base64,[data]" x="0" y="0" height="100%" width="100%"/>
    </svg>
    
  3. Then I uri-encoded all this stuff here SVG encoder

  4. Finally I put the result into my background property with data:image/svg+xml;charset=utf-8,[data]

在我的情况下,我需要对背景图像应用一个过滤器,但如果您不需要它,那没关系 :) 另外,在IE中它不起作用。希望这些信息有所帮助。

div {
    width: 100px;
    height: 100px;
    background: url(data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20xmlns%3Axlink%3D%22http%3A//www.w3.org/1999/xlink%22%20width%3D%22100%22%20height%3D%22100%22%20viewBox%3D%220%200%20100%20100%22%3E%0A%20%20%3Cimage%20xlink%3Ahref%3D%22data%3Aimage/jpeg%3Bbase64%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%22%20x%3D%220%22%20y%3D%220%22%20height%3D%22100%25%22%20width%3D%22100%25%22/%3E%0A%3C/svg%3E);
}
<div></div>


4
FYI,那个链接的SVG编码器所做的只是通过JavaScript的escape()函数运行字符串,因此您可以在浏览器控制台中复制它(在Firefox中按Ctrl+Shift+K,在Chrome中按Ctrl+Shift+J),只需运行escape(\<svg>…</svg>`)。另外请注意,如果您有问号,比如在<?xml …?>`中的问号,在Firefox 56或57+上它将无法工作,但Firefox不会抱怨缺少该前导标记。 - Adam Katz

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接