Svg responsive Breite mit einstellbarer Höhe

Question

hatte eine harte Zeit, um mit einer guten Lösung zu kommen, um eine reaktionsschnelle Svg zu haben, die die Bildschirmbreite plus eine justierbare Höhe annehmen wird. Ich habe versucht, width to 100% and height to something like 200px Einstellung, aber kein Glück.

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>

Ich habe auch versucht eine 100% Breite mit dem Kopfelement hinzufügen.

Answer 1

Erstens ist Ihr Selektor falsch, es sollte header svg nicht header.svg sein. Das SVG ist ein Kind des Headers ... der Header hat nicht die Klasse .svg.

Zweitens würde ich empfehlen, die Höhe und Breite von der SVG zu entfernen. Es ist nicht erforderlich, da Sie eine entsprechende viewbox festgelegt haben.

Jetzt scheint es, dass Sie wollen, dass die Breite des SVG 100% der Seite ist, aber die Höhe auf einen festgelegten Wert begrenzt werden soll. Dazu müssen Sie das preserveAspectRatio Attribut des SVG auf none setzen.

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>