是否可以在CSS中使用内联SVG定义?
我的意思是:
.my-class {
background-image: <svg>...</svg>;
}
当前回答
是的，这是可能的。试试这个:
body { background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}
http://jsfiddle.net/6WAtQ/
(注意，SVG内容需要进行url转义，例如#被%23取代。)
这可以在IE 9(支持SVG)中工作。数据url在旧版本的IE中也可以工作(有限制)，但它们本身不支持SVG。
其他回答
是的，这是可能的。试试这个:
body { background-image:
url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='10'><linearGradient id='gradient'><stop offset='10%' stop-color='%23F00'/><stop offset='90%' stop-color='%23fcc'/> </linearGradient><rect fill='url(%23gradient)' x='0' y='0' width='100%' height='100%'/></svg>");
}
http://jsfiddle.net/6WAtQ/
(注意，SVG内容需要进行url转义，例如#被%23取代。)
这可以在IE 9(支持SVG)中工作。数据url在旧版本的IE中也可以工作(有限制)，但它们本身不支持SVG。
如果你们中有人疯狂地试图使用内联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/
你也可以这样做:
<svg viewBox="0 0 32 32"> <path d="M11.333 13.173c0-2.51 2.185-4.506 4.794-4.506 2.67 0 4.539 2.053 4.539 4.506 0 2.111-0.928 3.879-3.836 4.392v0.628c0 0.628-0.496 1.141-1.163 1.141s-1.163-0.513-1.163-1.141v-1.654c0-0.628 0.751-1.141 1.419-1.141 1.335 0 2.571-1.027 2.571-2.224 0-1.255-1.092-2.224-2.367-2.224-1.335 0-2.367 1.027-2.367 2.224 0 0.628-0.546 1.141-1.214 1.141s-1.214-0.513-1.214-1.141zM15.333 23.333c-0.347 0-0.679-0.143-0.936-0.404s-0.398-0.597-0.398-0.949 0.141-0.689 0.398-0.949c0.481-0.488 1.39-0.488 1.871 0 0.257 0.26 0.398 0.597 0.398 0.949s-0.141 0.689-0.398 0.949c-0.256 0.26-0.588 0.404-0.935 0.404zM16 26.951c-6.040 0-10.951-4.911-10.951-10.951s4.911-10.951 10.951-10.951c6.040 0 10.951 4.911 10.951 10.951s-4.911 10.951-10.951 10.951zM16 3.333c-6.984 0-12.667 5.683-12.667 12.667s5.683 12.667 12.667 12.667c6.984 0 12.667-5.683 12.667-12.667s-5.683-12.667-12.667-12.667z"></path> </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的博客文章。
基于已经提到的https://github.com/yoksel/url-encoder/所采取的方法以编程方式完成:
// Svg (string) const hexagon = ` <svg width="100" height="20" viewBox="0 0 100 20" xmlns="http://www.w3.org/2000/svg"> <defs> <linearGradient id="redyel" gradientUnits="objectBoundingBox" x1="0" y1="0" x2="1" y2="1" > <stop offset="0%" stop-color="#ff0000" /> <stop offset="100%" stop-color="#ffff00" /> </linearGradient> </defs> <polygon points="0,10 5,0 95,0 100,10 95,20 5,20" fill="#eee" stroke="url(#redyel)" /> </svg> ` // svgToBackgroundImage const symbols = /[%#()<>?[\\\]^`{|}]/g; const newLine = /\r?\n/; const notEmptyString = (str) => str.length; const trim = (str) => str.trim(); const toOneLine = (str) => str.split(newLine).filter(notEmptyString).map(trim).join(" "); function addNameSpace(svgString) { if (svgString.indexOf(`http://www.w3.org/2000/svg`) < 0) { svgString = svgString.replace( /<svg/g, `<svg xmlns="http://www.w3.org/2000/svg"` ); } return svgString; } function encodeSVG(svgString) { svgString = svgString.replace(/>\s{1,}</g, `><`); svgString = svgString.replace(/\s{2,}/g, ` `); // Using encodeURIComponent() as replacement function // allows to keep result code readable return svgString.replace(symbols, encodeURIComponent); } const svgToBackgroundImage = (svgString) => `url('data:image/svg+xml,${encodeSVG(addNameSpace(toOneLine(svgString)))}')`; // DOM const element = document.querySelector("#hexagon"); element.style.backgroundImage = svgToBackgroundImage(hexagon); #hexagon { width: 100px; height: 20px; } <div id="hexagon"/>
