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

彈力最頂層的矩形到屏幕的頂部，以便在視口的上三分之一是橙色和拉伸自下而上大多數矩形到視口的底部，以便視口的下三分之一是紫色的。

您不能使用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>

始終保持 「方形」 垂直，其已經與CSS工作爲中心的，但不過SVG被操縱以解決將不得不保持這考慮到了。

無此處。

替代純SVG溶液

還有使用嵌套<svg>元素純SVG溶液。我們唯一使用的CSS只是爲了確保SVG佔用頁面的全部大小。

它通過使頂部和底部矩形用一個額外的1000個像素的viewBox外部延伸。爲確保它們可見，我們設置了overflow="visible"。 1000是一個任意值。如果你想支持高於2400像素的屏幕，那麼你可以選擇一個更大的值。

內SVG得到垂直居中使用y偏移和transform由200像素移位它的組合。這相當於垂直居中CSS塊元素的常見top: 50%; transform: translate(0,-50%)"技巧。

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找到。