CSS中的内联SVG

是否可以在CSS中使用内联SVG定义?

我的意思是:

.my-class {
  background-image: <svg>...</svg>;
}

当前回答

在Mac/Linux上，你可以用这个简单的bash命令轻松地将SVG文件转换为CSS背景属性的base64编码值:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

在Mac OS X上测试。这样还可以避免URL转义混乱。

记住，对SVG文件进行base64编码会增加其大小，请参阅css-tricks.com的博客文章。

2015-03-04 22:11:30

其他回答

在Mac/Linux上，你可以用这个简单的bash命令轻松地将SVG文件转换为CSS背景属性的base64编码值:

echo "background: transparent url('data:image/svg+xml;base64,"$(openssl base64 < path/to/file.svg)"') no-repeat center center;"

在Mac OS X上测试。这样还可以避免URL转义混乱。

记住，对SVG文件进行base64编码会增加其大小，请参阅css-tricks.com的博客文章。

2015-03-04 22:11:30

来自第三方来源的内联SVG(如谷歌图表)可能在SVG元素中不包含XML名称空间属性(xmlns="http://www.w3.org/2000/svg")(或者可能在SVG呈现后将其删除-浏览器检查器和浏览器控制台的jQuery命令都不显示SVG元素中的名称空间)。

当您需要为其他需要(CSS中的background-image或HTML中的img元素)重新使用这些svg片段时，请注意丢失的名称空间。如果没有名称空间，浏览器可能会拒绝显示SVG(无论编码是utf8还是base64)。

2015-06-26 20:46:49

如果你们中有人疯狂地试图使用内联SVG作为背景，那么上面的转义建议就不太管用了。首先，它不能在IE中工作，而且取决于SVG的内容，该技术在其他浏览器(如FF)中会造成麻烦。

如果base64编码svg(不是整个url，只是svg标签及其内容!)它适用于所有浏览器。下面是base64中相同的jsfiddle示例:http://jsfiddle.net/vPA9z/3/

CSS现在看起来是这样的:

body { background-image: 
    url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHdpZHRoPScxMCcgaGVpZ2h0PScxMCc+PGxpbmVhckdyYWRpZW50IGlkPSdncmFkaWVudCc+PHN0b3Agb2Zmc2V0PScxMCUnIHN0b3AtY29sb3I9JyNGMDAnLz48c3RvcCBvZmZzZXQ9JzkwJScgc3RvcC1jb2xvcj0nI2ZjYycvPiA8L2xpbmVhckdyYWRpZW50PjxyZWN0IGZpbGw9J3VybCgjZ3JhZGllbnQpJyB4PScwJyB5PScwJyB3aWR0aD0nMTAwJScgaGVpZ2h0PScxMDAlJy8+PC9zdmc+");

记得在转换为base64之前删除任何URL转义。换句话说，上面的例子显示color='#fcc'转换为color='%23fcc'，您应该返回到#。

base64工作得更好的原因是它消除了单引号和双引号以及url转义的所有问题

如果你正在使用JS，你可以使用window.btoa()来生成base64 svg;如果它不起作用(它可能会抱怨字符串中的无效字符)，您可以简单地使用https://www.base64encode.org/。

设置一个div背景。

var mySVG = "<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='#F00'/><stop offset='90%' stop-color='#fcc'/> </linearGradient><rect fill='url(#gradient)' x='0' y='0' width='100%' height='100%'/></svg>"; var mySVG64 = window.btoa(mySVG); document.getElementById('myDiv').style.backgroundImage = "url('data:image/svg+xml;base64," + mySVG64 + "')"; html, body, #myDiv { width: 100%; height: 100%; margin: 0; } <div id="myDiv"></div>

使用JS，你可以动态地生成svg，甚至改变它的参数。

关于使用SVG的一篇较好的文章在这里:http://dbushell.com/2013/02/04/a-primer-to-front-end-svg-hacking/

2014-02-07 11:34:24

你也可以这样做:

2020-07-21 19:53:10

如果你正在使用postcss，你可以尝试postcss-inline-svg插件https://www.npmjs.com/package/postcss-inline-svg

.up {
    background: svg-load('img/arrow-up.svg', fill: #000, stroke: #fff);
}
.down {
    background: svg-load('img/arrow-down.svg', fill=#000, stroke=#fff);
}

2021-06-23 01:02:22

CSS中的内联SVG

推荐文章

最新文章

标签