如何在 CSS 背景中正确制作 SVG-sprite 图块?
How can i make an SVG-sprite tile properly in a CSS background?
我正在尝试使用 SVG 的一部分作为平铺背景。但是我在使其正常工作时遇到了很大的问题。
我认为一张图片最能说明问题:
demonstration picture
这是我的 CSS:
body {
background: url("tiletest.svg#svgView(viewBox(120 32 150 64))");
background-size: 30px 32px;
}
下面是我用于演示的 SVG 代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg height="100" width="360" version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 360 100" style="enable-background:new 0 0 360 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#13FF00;}
.st2{fill:#2732FF;}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.094947e-13" y1="9.094947e-13" x2="100" y2="100">
<stop offset="0" style="stop-color:#E7FF00"/>
<stop offset="1" style="stop-color:#FF0000"/>
</linearGradient>
<rect class="st0" width="100" height="100"/>
</g>
<polygon class="st1" points="174.68,0 190.92,32.92 227.25,38.2 200.96,63.82 207.17,100 174.68,82.92 142.19,100 148.39,63.82
122.11,38.2 158.43,32.92 "/>
<circle class="st2" cx="310" cy="50" r="50"/>
</svg>
如您所见,SVG 中的完整视图框是 0 0 360 100,当我在 CSS 中调用 SVG 时,我给它一个新的视图框 120 32 150 64,以及相应地更改背景大小(尽管我很确定这应该无关紧要,因为无论大小如何,视图框定义的 svg 都应该扩展以填充容器,对吧?)。
我试过摆弄 SVG 中的视图框、宽度和高度以及 preserveAspectRatio 属性,但到目前为止没有任何效果。我做错了什么?
<更新>
虽然我在下面写的内容很有用,但并没有完全解决您的问题。附带条件是 Safari 和 iOs 支持是 flakey,我通过删除 SVG 上的高度和宽度来让你的代码工作,如下所示:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
使用以下 html 在 Chrome、Firefox 和 IE11 中工作:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Fragment</title>
<style type="text/css">
body {
background: url("tiletest.svg#svgView(viewBox(120,32,30,32))");
background-size: 30px 32px;
}
</style>
</head>
<body>
<h1>SVG Fragment</h1>
</body>
</html>
更新>
有几件事,对内联视图框的支持还没有在所有浏览器中出现......而且经常有怪癖(见底部的链接)......另一个是视图框是 x-min y-min width height
。 .. 你似乎认为它是 x1 y1 x2 y2
.
您应该使用 background: url("tiletest.svg#svgView(viewBox(120 32 30 32))");
才能在 Chrome 中工作...尽管您可能需要使用 view
元素才能在 Firefox 中工作。
我在下面展示了另一种实现您想要的东西的方法,它适用于所有现代浏览器(Opera Mini 和其他一些浏览器除外)。希望它能给你一些想法。
.svg-background {
height: 200px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 32 30 32'%3E%3ClinearGradient id='grad' x2='100' y2='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E7FF00'/%3E%3Cstop offset='1' stop-color='%23F00'/%3E%3C/linearGradient%3E%3Cpath d='M0 0h100v100H0z' fill='url(%23grad)'/%3E%3Cpath d='M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z' fill='%2313FF00'/%3E%3Ccircle cx='310' cy='50' r='50' fill='%232732FF'/%3E%3C/svg%3E");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
<div class="svg-background">
</div>
进一步阅读:
我正在尝试使用 SVG 的一部分作为平铺背景。但是我在使其正常工作时遇到了很大的问题。
我认为一张图片最能说明问题: demonstration picture
这是我的 CSS:
body {
background: url("tiletest.svg#svgView(viewBox(120 32 150 64))");
background-size: 30px 32px;
}
下面是我用于演示的 SVG 代码:
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 21.0.1, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg height="100" width="360" version="1.1" id="Lager_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 360 100" style="enable-background:new 0 0 360 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:url(#SVGID_1_);}
.st1{fill:#13FF00;}
.st2{fill:#2732FF;}
</style>
<g>
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="9.094947e-13" y1="9.094947e-13" x2="100" y2="100">
<stop offset="0" style="stop-color:#E7FF00"/>
<stop offset="1" style="stop-color:#FF0000"/>
</linearGradient>
<rect class="st0" width="100" height="100"/>
</g>
<polygon class="st1" points="174.68,0 190.92,32.92 227.25,38.2 200.96,63.82 207.17,100 174.68,82.92 142.19,100 148.39,63.82
122.11,38.2 158.43,32.92 "/>
<circle class="st2" cx="310" cy="50" r="50"/>
</svg>
如您所见,SVG 中的完整视图框是 0 0 360 100,当我在 CSS 中调用 SVG 时,我给它一个新的视图框 120 32 150 64,以及相应地更改背景大小(尽管我很确定这应该无关紧要,因为无论大小如何,视图框定义的 svg 都应该扩展以填充容器,对吧?)。
我试过摆弄 SVG 中的视图框、宽度和高度以及 preserveAspectRatio 属性,但到目前为止没有任何效果。我做错了什么?
<更新>
虽然我在下面写的内容很有用,但并没有完全解决您的问题。附带条件是 Safari 和 iOs 支持是 flakey,我通过删除 SVG 上的高度和宽度来让你的代码工作,如下所示:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
使用以下 html 在 Chrome、Firefox 和 IE11 中工作:
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SVG Fragment</title>
<style type="text/css">
body {
background: url("tiletest.svg#svgView(viewBox(120,32,30,32))");
background-size: 30px 32px;
}
</style>
</head>
<body>
<h1>SVG Fragment</h1>
</body>
</html>
更新>
有几件事,对内联视图框的支持还没有在所有浏览器中出现......而且经常有怪癖(见底部的链接)......另一个是视图框是 x-min y-min width height
。 .. 你似乎认为它是 x1 y1 x2 y2
.
您应该使用 background: url("tiletest.svg#svgView(viewBox(120 32 30 32))");
才能在 Chrome 中工作...尽管您可能需要使用 view
元素才能在 Firefox 中工作。
我在下面展示了另一种实现您想要的东西的方法,它适用于所有现代浏览器(Opera Mini 和其他一些浏览器除外)。希望它能给你一些想法。
.svg-background {
height: 200px;
background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='120 32 30 32'%3E%3ClinearGradient id='grad' x2='100' y2='100' gradientUnits='userSpaceOnUse'%3E%3Cstop offset='0' stop-color='%23E7FF00'/%3E%3Cstop offset='1' stop-color='%23F00'/%3E%3C/linearGradient%3E%3Cpath d='M0 0h100v100H0z' fill='url(%23grad)'/%3E%3Cpath d='M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z' fill='%2313FF00'/%3E%3Ccircle cx='310' cy='50' r='50' fill='%232732FF'/%3E%3C/svg%3E");
}
<svg xmlns="http://www.w3.org/2000/svg" width="100" viewBox="0 0 360 100">
<linearGradient id="grad" x2="100" y2="100" gradientUnits="userSpaceOnUse">
<stop offset="0" stop-color="#E7FF00"/>
<stop offset="1" stop-color="#F00"/>
</linearGradient>
<path d="M0 0h100v100H0z" fill="url(#grad)"/>
<path d="M174.68 0l16.24 32.92 36.33 5.28-26.29 25.62 6.21 36.18-32.49-17.08L142.19 100l6.2-36.18-26.28-25.62 36.32-5.28z" fill="#13FF00"/>
<circle cx="310" cy="50" r="50" fill="#2732FF"/>
</svg>
<div class="svg-background">
</div>