Svg高度可調的響應寬度

Question

一直沒有找到一個好的解決方案，有一個響應式svg，將採用屏幕寬度加上一個可調節的高度。我嘗試設置width to 100% and height to something like 200px，但沒有運氣。

header.svg { 
 
    width: 100%; 
 
    max-height: 200px; 
 
    height: 200px; 
 
}

<header> 
 
<svg width="321px" height="141px" viewBox="0 0 321 141" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
 
    <defs></defs> 
 
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="header-copy-" fill="#262626"> 
 
      <g id="header-copy-2"> 
 
       <path d="M0,0.31823636 L321,0.31823636 L321,132.556396 C267.894961,138.185465 214.394961,141 160.5,141 C106.605039,141 53.1050387,138.185465 0,132.556396 L0,0.31823636 Z" id="Rectangle-Copy-12"></path> 
 
      </g> 
 
     </g> 
 
    </g> 
 
</svg> 
 
</header>

我還嘗試添加一個100%寬度與首標元素。

Answer 1

首先，您的選擇器不正確，應該是header svg而不是header.svg。 SVG是標題的小孩......標題沒有.svg的類。

其次，我建議從SVG中刪除高度和寬度。這是不需要的，因爲你已經設置了合適的viewbox。

現在，您似乎希望SVG的寬度爲頁面的100％，但是的高度限制爲設定值。

爲此，您必須將SVG的preserveAspectRatio屬性設置爲none。

Viewbox & PreserveAspectRatio

header { 
 
    background: pink; 
 
} 
 

 
svg { 
 
    max-height: 100px; 
 
    width: 100%; 
 
    margin: auto; 
 
    display: block; 
 
}

<header class="wide"> 
 
    <svg viewBox="0 0 321 141" version="1.1" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="none"> 
 
    <defs></defs> 
 
    <g id="Symbols" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd"> 
 
     <g id="header-copy-" fill="#262626"> 
 
      <g id="header-copy-2"> 
 
       <path d="M0,0.31823636 L321,0.31823636 L321,132.556396 C267.894961,138.185465 214.394961,141 160.5,141 C106.605039,141 53.1050387,138.185465 0,132.556396 L0,0.31823636 Z" id="Rectangle-Copy-12"></path> 
 
      </g> 
 
     </g> 
 
    </g> 
 
</svg> 
 
</header>