我试图使用SVG的一部分作为平铺背景。但是,我遇到了很大的问题,使其正常工作。如何在CSS背景中正确制作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中的完整viewbox是0 0 360 100,当我在CSS中调用SVG时,我给它一个120的新viewbox 32 150 64,以及相应地更改背景大小(虽然我很确定这无关紧要,因为无论如何,由viewbox定义的svg应该扩大以填充容器,无论大小,对吧?)。
我试着用SVGA中的viewbox,带宽度和高度,用preserveAspectRatio属性来处理,到目前为止没有任何工作。我究竟做错了什么?
也许例如删除空格tiletest.svg#svgView(viewBox(120,32,150,64)) –
您使用的浏览器是?片段标识符等在所有浏览器中都得不到很好的支持。 – Ruskin