响应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%);
    }
}

看起来是这样的：

我怎样才能做到以下几点

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

将彩色条带水平拉伸到视口左右两侧的边缘

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

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

这是一个这样的例子：随着窗口越来越高，彩色矩形将停留在中间，但是顶部橙色和底部紫色会根据视口的高度被切断。

---

不能使用媒体查询或css样式，因为svg不支持这种功能。如果您真的需要使用SVG来实现这一点，那么您将需要一些Javascript来实现所需的效果。在您的例子中，我想使用html和css以及一些媒体查询来创建它更简单

---

缩放/显示SVG时唯一可以控制的是

preserveAspectRatio

属性。可以找到详细的描述。

您不能使用媒体查询或css样式，因为svg不支持这一点。如果您真的需要使用SVG来实现这一点，那么您将需要一些Javascript来实现所需的效果。在您的例子中，我想使用html和css以及一些媒体查询来创建它更简单

缩放/显示SVG时唯一可以控制的是

preserveAspectRatio

属性。可以找到详细的描述

我怎样才能做到以下几点

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

通过将“高度”设置为400px，您已经在执行此操作

将彩色条带水平拉伸到视口左右两侧的边缘

在SVG上设置

preserveAspectRatio=“none”

。见下文

正文{
背景色：#dad9c7；
}
svg{
位置：绝对位置；
宽度：100%；
高度：400px；
保证金：0自动；
显示：块；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

我怎样才能做到以下几点

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

通过将“高度”设置为400px，您已经在执行此操作

将彩色条带水平拉伸到视口左右两侧的边缘

在SVG上设置

preserveAspectRatio=“none”

。见下文

正文{
背景色：#dad9c7；
}
svg{
位置：绝对位置；
宽度：100%；
高度：400px；
保证金：0自动；
显示：块；
最高：50%；
左：50%；
转换：翻译（-50%，-50%）；
}

嗯？是什么让您认为SVG不支持CSS或媒体查询？我们可以使用CSS更改

元素的

x/y/width/height

？对于矩形，我们可以说

width=100%

？在SVG1.1中，只有样式属性可以用CSS修改。不是像位置和大小这样的几何属性。但是，在SVG2中，您可以。但是你没有说你在谈论它们。@Paul LeBeau那么你认为现在只能用css解决上述问题吗？我不在乎使用哪个版本的SVG，只要它能在最新版本的Chrome和Safari中工作。嗯？是什么让您认为SVG不支持CSS或媒体查询？我们可以使用CSS更改

元素的

x/y/width/height

？对于矩形，我们可以说

width=100%

？在SVG1.1中，只有样式属性可以用CSS修改。不是像位置和大小这样的几何属性。但是，在SVG2中，您可以。但是你没有说你在谈论它们。@Paul LeBeau那么你认为以上问题现在只能用css解决吗？我不在乎我使用哪个版本的SVG，只要它能在最新版本的Chrome和Safari.Plus1中工作，因为它非常复杂！再加上难以置信的复杂！

<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>