Svg高度可调的响应宽度

一直没有找到一个好的解决方案，有一个响应式svg，将采用屏幕宽度加上一个可调节的高度。我尝试设置width to 100% and height to something like 200px，但没有运气。Svg高度可调的响应宽度

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%宽度与首标元素。

来源

2017-06-13 claudios

首先，您的选择器不正确，应该是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>

来源

2017-06-13 11:19:42

酷！我注意到你只是删除了svg的内联样式。 – claudios

......并添加了“preserveaspectratio：none”......这很重要。 –

谢谢！只是好奇，你是如何设定高度的？ – claudios

Svg高度可调的响应宽度

回答

相关问题