主页 / 问题 / 1064916
Accepted
BlackStar1991
Asked:2020-12-31 23:48:23 +0000 UTC2020-12-31 23:48:23 +0000 UTC

根据浏览器窗口的大小调整背景图案的大小

  • 772

有没有办法根据浏览器窗口的大小调整图案图像 (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;}
    }

不起作用。

还有其他方法吗？

javascript

2 个回答

  1. 我设法像这样解决它：

    • 按<path>标签分组<g>（如果不是复合路径）；

    • 删除属性viewBox；

    • 在这种情况下按大小设置width/heighty ；<pattern>viewBox50

    • scale()在 CSS 中为每个请求中的属性值设置一个局部变量@media（ cwidth/height失败）；

    • 然后在JS中获取变量的值并<pattern>通过setAttribute()

    var group = document.getElementById('group');
var message = document.getElementById('msg');
var pattern = document.getElementById('path404');

window.onload = resizepattern();
window.addEventListener('resize', resizepattern);

function resizepattern() {

  var st = window.getComputedStyle(group, null).getPropertyValue('--scale_1');

  message.textContent = st;
  pattern.setAttribute('width', 50 * st)
  pattern.setAttribute('height', 50 * st)

}
    * {
  margin: 0;
  padding: 0;
}

body {
  position: absolute;
  height: 100%;
  width: 100%;
}

p {
  font-size: 50px;
  color: red;
  position: absolute;
}

#group {
  --scale_1: 1;
  transform: scale(var(--scale_1));
}

@media (max-width: 700px) {
  #group {
    --scale_1: 7;
    transform: scale(var(--scale_1));
  }
}
    <p id="msg"></p>

<svg width="100%" height="100%">
        <defs>
       <pattern id="path404" x="0" y="0"  width="50" height="50"  patternUnits="userSpaceOnUse">
			 
			 <g id = "group">
              <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"/>
							</g>
            </pattern>
        </defs>
        <rect x="0" y="0" width="100%" height="100%" fill="url(#path404)" />

    • 3
  2. Best Answer

    请告诉我，有没有办法根据浏览器窗口的大小来改变图案图像（SVG）的大小？

    SVG 中的图像缩放仅在指定时才有可能viewBox

    在 SVG 文件中应用模式的情况下，您需要使用viewBox两次：
    在模式内 

    <pattern id="path404" x="0" y="0" width="100px" height="100px" viewBox="0 0 50 50" patternUnits="userSpaceOnUse">`

    在 SVG 文件的标题中：

      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1400 1000" preserveAspectRatio="xMinYMin meet">

    包裹在容器中的 svg 块 

    .decor_404 {
  position: absolute;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background-color: #000;
  z-index: 2;
}

    通过以百分比或相对单位设置其高度和宽度vh以及为 SVGvw设置
    viewBox="0 0 1400 1000"，我们可以根据浏览器窗口中的变化获得图案的缩放比例 

    .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;
    <div class="decor_404">
  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"  viewBox="0 0 1400 2800" 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 x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
    </svg>
</div>


    在评论中更新

    例如，是否有可能实现屏幕 <450 像素的设备有 4 只老鼠？

    想象一下，图案和浴室里的瓷砖一样。
    你的图案（一张瓷砖）很100px宽。所以4 块瓷砖将适合
    宽度。400px因此，需要选择viewBox(100 * 4) 乘以 4 的倍数的大小。
    在viewBox="0 0 400 400"- 将始终在任何屏幕分辨率下- 水平 4 个图块

    在 - viewBox="0 0 800 800 - 8 格（8 只老鼠）

    .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;
    <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 x="0" y="0" width="100%" height="100%" fill="url(#path404)" />
    </svg>
</div>

    如果一个图块的大小必须保持不变 -100 х 100px在任何显示分辨率下，同时在400px4 个图块的分辨率下，那么您就不能再没有媒体查询，您需要在其中指定不同的固定宽度容器 .decor_404

    例如，对于 400 像素的屏幕分辨率 .decor{width: 400px}- 4 个图块

    对于 1600px 分辨率 - .decor{width: 1600px}- 16 个图块

    在这种情况下，图块将具有相同的大小，但在不同的屏幕分辨率下会有不同的数量。

    PS
    现在小工具很多，所以布局中几乎不用媒体查询，因为需要提供大量的屏幕分辨率。
    在我看来，使用自适应布局更实用，就像在我的第一个示例中一样，通过调整尺寸viewBox

    相关问题：为什么图案用 10 x 10 白色正方形填充

    • 3

相关问题