been having a hard time to come up with a good solution to have a responsive svg that will adopt the screen width plus an adjustable height. I tried setting width to 100% and height to something like 200px but no luck.
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>I also tried adding a 100% width to the header element.
Firstly, your selector is incorrect, it should be header svg not header.svg. The SVG is a child of the header...the header does not have the class of .svg.
Secondly, I'd recommend removing the height and width from the SVG. It's not needed since you have set an appropriate viewbox.
Now, it seems you want the width of the SVG to be 100% of the page but the height to be limited to a set value.
To do this you will have to set the preserveAspectRatio attribute of the SVG to 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>この記事はインターネットから収集されたものであり、転載の際にはソースを示してください。
侵害の場合は、連絡してください[email protected]
コメントを追加