CSS中的内联SVG

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

我的意思是:

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

当前回答

如果你正在使用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

其他回答

我的解决方案是https://yoksel.github.io/url-encoder/ 您只需插入svg并返回背景图像代码

2020-08-05 10:50:56

我在CodePen演示中也遇到了将内联SVG嵌入CSS的问题。使用SCSS的解决方案是构建一个简单的url编码函数。

字符串替换函数可以从内置的str-slice, str-index函数中创建(参见css-tricks，感谢Hugo Giraudel)。

然后，用%xxcodes替换%，<，>，"，':

@function svg-inline($string){
  $result: str-replace($string, "<svg", "<svg xmlns='http://www.w3.org/2000/svg'");
  $result: str-replace($result, '%', '%25');
  $result: str-replace($result, '"', '%22');
  $result: str-replace($result, "'", '%27');
  $result: str-replace($result, ' ', '%20');
  $result: str-replace($result, '<', '%3C');
  $result: str-replace($result, '>', '%3E');
  @return "data:image/svg+xml;utf8," + $result;
}

$mySVG: svg-inline("<svg>...</svg>");

html {
  height: 100vh;
  background: url($mySVG) 50% no-repeat;
}

Compass中还提供了一个图像内联助手函数，但由于CodePen不支持它，因此这个解决方案可能会有用。

CodePen上的演示:http://codepen.io/terabaud/details/PZdaJo/

2016-02-04 14:57:00

如果你正在使用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

如果你们中有人疯狂地试图使用内联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

CSS中的内联SVG

推荐文章

最新文章

标签