有没有办法根据浏览器窗口的大小调整图案图像 (SVG) 的大小?
我举个例子:
.decor_404 {
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
background-color: #000;
z-index: 2;
}
.st0 {
fill: #ebe5dd;
}
.st1 {
fill: #d9ccbc;
}
.st2 {
fill: #ffdc40;
}
.st6 {
fill: #994c0f;}
.decor{width: 1600px}
@media (max-width: 450px) {
.decor{width: 400px}
}
<div class="decor_404">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 400 400" preserveAspectRatio="xMinYMin meet">
<defs>
<pattern id="path404" x="0" y="0" width="100px" height="100" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">
<path class="st0" d="M0 31.3h16.4v2.9H0z"/><path class="st1" d="M33.4 31.3H50v2.9H33.4z"/><path transform="rotate(-8.488 11.5788 38.36)" class="st0" d="M2.8 36.9h17.5v2.9H2.8z"/><path transform="rotate(-81.553 38.4156 38.361)" class="st1" d="M37 29.6h2.9v17.5H37z"/><path class="st2" d="M9.3 18.6C4.2 18.6 0 14.4 0 9.3S4.2 0 9.3 0s9.3 4.2 9.3 9.3c0 2.1-.7 4-1.9 5.6l-3.9 3c-1.1.4-2.3.7-3.5.7z"/><path d="M40.7 18.6c-1.2 0-2.4-.2-3.5-.7l-3.9-3c-1.2-1.6-1.9-3.6-1.9-5.6 0-5.1 4.2-9.3 9.3-9.3S50 4.2 50 9.3s-4.2 9.3-9.3 9.3z" fill="#ffab15"/><path d="M25 44.9L11.2 28.7c-2.6-3-3.2-7.2-1.5-10.9 1.7-3.7 5.3-6 9.3-6h12c4 0 7.6 2.3 9.3 6 1.7 3.7 1.1 7.9-1.5 10.9L25 44.9z" fill="#ffea84"/><path class="st2" d="M40.3 17.8c-1.7-3.7-5.3-6-9.3-6h-6v33.1l13.8-16.2c2.6-3 3.2-7.2 1.5-10.9z"/><path d="M25 50c-1.6 0-2.9-1.3-2.9-2.9s1.3-2.9 2.9-2.9 2.9 1.3 2.9 2.9S26.6 50 25 50z" fill="#bf6015"/><circle class="st6" cx="20.1" cy="23" r="2"/><circle cx="29.9" cy="23" r="2" fill="#713708"/><path class="st6" d="M25 44.1V50c1.6 0 2.9-1.3 2.9-2.9s-1.3-3-2.9-3z"/>
</pattern>
</defs>
<rect class="decor" x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
</svg>
</div>
在上面的例子中,图案的尺寸是通过改变width
height
标签的值来改变的pattern
。但是这样扔@media
:
@media only screen and (max-width: 768px) {
.decor_404 svg pattern{width:200px; height:200px;}
}
不起作用。
还有其他方法吗?
我设法像这样解决它:
按
<path>
标签分组<g>
(如果不是复合路径);删除属性
viewBox
;在这种情况下按大小设置
width/height
y ;<pattern>
viewBox
50
scale()
在 CSS 中为每个请求中的属性值设置一个局部变量@media
( cwidth/height
失败);然后在JS中获取变量的值并
<pattern>
通过setAttribute()
SVG 中的图像缩放仅在指定时才有可能
viewBox
在 SVG 文件中应用模式的情况下,您需要使用
viewBox
两次:在模式内
在 SVG 文件的标题中:
包裹在容器中的 svg 块
通过以百分比或相对单位设置其高度和宽度
vh
以及为 SVGvw
设置viewBox="0 0 1400 1000"
,我们可以根据浏览器窗口中的变化获得图案的缩放比例在评论中更新
想象一下,图案和浴室里的瓷砖一样。
你的图案(一张瓷砖)很
100px
宽。所以4 块瓷砖将适合宽度。
400px
因此,需要选择viewBox
(100 * 4) 乘以 4 的倍数的大小。在
viewBox="0 0 400 400"
- 将始终在任何屏幕分辨率下- 水平 4 个图块在 -
viewBox="0 0 800 800
- 8 格(8 只老鼠)如果一个图块的大小必须保持不变 -
100 х 100px
在任何显示分辨率下,同时在400px
4 个图块的分辨率下,那么您就不能再没有媒体查询,您需要在其中指定不同的固定宽度容器.decor_404
例如,对于 400 像素的屏幕分辨率
.decor{width: 400px}
- 4 个图块对于 1600px 分辨率 -
.decor{width: 1600px}
- 16 个图块在这种情况下,图块将具有相同的大小,但在不同的屏幕分辨率下会有不同的数量。
PS
现在小工具很多,所以布局中几乎不用媒体查询,因为需要提供大量的屏幕分辨率。
在我看来,使用自适应布局更实用,就像在我的第一个示例中一样,通过调整尺寸
viewBox
相关问题:为什么图案用 10 x 10 白色正方形填充