响应式 SVG 大小调整

Question

我有以下 SVG：

body {
    background-color: #dad9c7;
    svg {
        position: absolute;
        width: 100%;
        height: 400px;
        margin: 0 auto;
        display: block;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
    }
}

.

<svg viewBox="0 0 1000 1000" xmlns="http://www.w3.org/2000/svg" version="1.1">

    <g>
        <rect width="1000" height="151" x="0" y="0" fill="#d5835b" />
        <rect width="1000" height="151" x="0" y="150" fill="#d47966" />
        <rect width="1000" height="126" x="0" y="300" fill="#b66961" />
        <rect width="1000" height="101" x="0" y="425" fill="#d17385" />
        <rect width="1000" height="101" x="0" y="525" fill="#aa617c" />
        <rect width="1000" height="101" x="0" y="625" fill="#a36d8f" />
        <rect width="1000" height="101" x="0" y="725" fill="#736d87" />
        <rect width="1000" height="176" x="0" y="825" fill="#313d53" />
    </g>        

</svg>

看起来像这样：

我该如何执行以下操作？

1. 缩放窗口（不是缩放）时，保持彩色条的高度相同。
2. 在左右两侧的视口边缘水平拉伸彩色条带。
3. 将最顶部的矩形拉伸到屏幕顶部，使视口的上三分之一为橙色，并将最底部的矩形拉伸至视口的底部，使视口的下三分之一为紫色。李>
4. 始终保持“正方形”垂直居中，这已经适用于 CSS，但是处理 SVG 以解决问题时必须考虑到这一点。

这是一个外观示例：随着窗口变高，彩色矩形将停留在中间，但顶部的橙色和底部的紫色将根据视口的高度被截断。

Answer 1

我该怎么做？

1. 缩放窗口（不是缩放）时，保持彩色条的高度相同。

您已经通过将高度设置为 400 像素来执行此操作。

1. 在左右两侧的视口边缘水平拉伸彩色条带。

在 SVG 上设置 preserveAspectRatio="none"。见下文。

body {
    background-color: #dad9c7;
}

svg {
    position: absolute;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">

    <g>
        <rect width="1000" height="151" x="0" y="0" fill="#d5835b" />
        <rect width="1000" height="151" x="0" y="150" fill="#d47966" />
        <rect width="1000" height="126" x="0" y="300" fill="#b66961" />
        <rect width="1000" height="101" x="0" y="425" fill="#d17385" />
        <rect width="1000" height="101" x="0" y="525" fill="#aa617c" />
        <rect width="1000" height="101" x="0" y="625" fill="#a36d8f" />
        <rect width="1000" height="101" x="0" y="725" fill="#736d87" />
        <rect width="1000" height="176" x="0" y="825" fill="#313d53" />
    </g>        

</svg>

1. 将最顶部的矩形拉伸到屏幕顶部，使视口的上三分之一为橙色，并将最底部的矩形拉伸至视口的底部，使视口的下三分之一为紫色。李>

您不能使用 CSS 自动拉伸矩形本身。但是你可以做到这一点的一种方法是使用伪元素为父元素的上半部分和下半部分涂上匹配的颜色。

body {
    background-color: #dad9c7;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    padding: 0;
    margin: 0;
}

svg {
    position: absolute;
    width: 100%;
    height: 400px;
    margin: 0 auto;
    display: block;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

body::before {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 0;
  bottom: 50%;
  background-color: #d5835b;
}

body::after {
  content: "";
  display: block;
  position: absolute;
  width: 100%;
  top: 50%;
  bottom: 0;
  background-color: #313d53;
  z-index: -1;
}

<svg viewBox="0 0 1000 1000" preserveAspectRatio="none">

    <g>
        <rect width="1000" height="151" x="0" y="0" fill="#d5835b" />
        <rect width="1000" height="151" x="0" y="150" fill="#d47966" />
        <rect width="1000" height="126" x="0" y="300" fill="#b66961" />
        <rect width="1000" height="101" x="0" y="425" fill="#d17385" />
        <rect width="1000" height="101" x="0" y="525" fill="#aa617c" />
        <rect width="1000" height="101" x="0" y="625" fill="#a36d8f" />
        <rect width="1000" height="101" x="0" y="725" fill="#736d87" />
        <rect width="1000" height="176" x="0" y="825" fill="#313d53" />
    </g>        

</svg>

4. 始终保持“正方形”垂直居中，这已经适用于 CSS，但是处理 SVG 以解决问题时必须考虑到这一点。

这里不适用。

替代的纯 SVG 解决方案

还有一个使用嵌套 <svg> 元素的纯 SVG 解决方案。我们使用的唯一 CSS 只是为了确保 SVG 占据页面的完整大小。

它的工作原理是使顶部和底部矩形超出viewBox 额外的 1000 像素。为了确保它们可见，我们设置了overflow="visible"。 1000 是任意值。如果要支持 > 2400 像素高的屏幕，则可以选择更大的值。

内部 SVG 使用y 偏移量和transform 的组合垂直居中，将其向上移动 200 像素。这相当于常见的top: 50%; transform: translate(0,-50%)" 技巧，用于垂直居中 CSS 块元素。

body {
    background-color: #dad9c7;
    padding: 0;
    margin: 0;
}

#mysvg {
    position: absolute;
    display: block;
    width: 100%;
    height: 100%;
}

<svg id="mysvg">

  <g transform="translate(0, -200)">
    <svg width="100%" height="400px"
         y="50%" transform="translate(0, -200)"
         viewBox="0 0 1000 1000" preserveAspectRatio="none"
         overflow="visible">

      <g>
        <rect width="1000" height="1151" x="0" y="-1000" fill="#d5835b" />
        <rect width="1000" height="151" x="0" y="150" fill="#d47966" />
        <rect width="1000" height="126" x="0" y="300" fill="#b66961" />
        <rect width="1000" height="101" x="0" y="425" fill="#d17385" />
        <rect width="1000" height="101" x="0" y="525" fill="#aa617c" />
        <rect width="1000" height="101" x="0" y="625" fill="#a36d8f" />
        <rect width="1000" height="101" x="0" y="725" fill="#736d87" />
        <rect width="1000" height="1176" x="0" y="825" fill="#313d53" />
     </g>

    </svg>
  </g>

</svg>

Answer 2

您不能为此使用媒体查询或 css 样式，因为 svg 不支持。如果你真的需要使用 SVG，你将需要一些 Javascript 来实现你想要的效果。在您的情况下，我想使用带有一些媒体查询的 html 和 css 创建它更简单。

在缩放/显示 SVG 时，您唯一可以控制的是 preserveAspectRatio 属性。详细说明可参见here。