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% ，但高度限制为设定值。

为此，您必须将preserveAspectRatioSVG 的属性设置为none。

视图框和保留纵横比

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>