Menu
I'm trying to put a svg object on my html page and I want it to have a 100% width and a fixed height.
In my fiddle you can see that the height of the dark-grey object changes according to the window proportions. (This is not what I want)
http://jsfiddle.net/Lq207ery/6/
HTML
<body>
<!-- HEADER -->
<header>
<div class="logo"></div>
<div class="triangle">
<svg data-type="vertical_parallax" data-speed="2" x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310" style="-webkit-transform: translate3d(0px, 0px, 0px); transform: translate3d(0px, 0px, 0px);">
<g>
<!--<polyline stroke="#222" fill="none" stroke-width="1" points="0,210 0,210 310,0 "></polyline>-->
<polyline fill="#CC0000" points="0,0 0,200 300,0 "></polyline>
</g>
</svg>
</div>
<div class="nav">
<svg width="100%" viewBox="0 0 10 10" preserveAspectRatio="xMinYmin">
<polygon fill="#222" stroke-width="0" points="0,1.5 0,0 10,0 15,0 " />
</svg>
</div>
</header>
<!-- CONTENT -->
CSS
body {
margin: 0;
}
header svg {
display: block;
margin: 0;
}
header .triangle {
z-index: 200;
}
header .logo {
margin-top: -90px;
}
header .nav {
position: absolute;
top:0;
left:0;
width:100%;
z-index:-1;
}
458
viewBox to crop to the height of your content.preserveAspectRatio value to have the proper case-sensitive value, e.g. xMinYMin (not xMinYmin).If you want your dark grey triangle to stretch (not preserving its aspect ratio) then instead use preserveAspectRatio="none".
106
You explanation is somewhat short, but you could do it like this :
HTML Code :
<header>
<div class="triangle">
<svg x="0px" y="0px" width="410" height="410" viewBox="0 0 310 310">
<g>
<polyline fill="#CC0000" points="0,0 0,200 300,0"/>
</g>
</svg>
</div>
<div class="nav"></div>
</header>
CSS Code :
html, body {
margin: 0;
}
header {
position: relative;
}
header .triangle {
position: relative;
z-index: 2;
}
header .nav {
position: absolute;
top:0;
left:0;
width: 2000px; // big screens
height: 100px;
background-image:url('data:image/svg+xml;utf8,%3Csvg%20version%3D%221.1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%20width%3D%22150px%22%20height%3D%2215px%22%20viewBox%3D%220%200%20150%2015%22%3E%3Cg%3E%3Cpolygon%20fill%3D%22%23222%22%20points%3D%220%2C15%200%2C0%20100%2C0%20150%2C0%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E');
background-size: cover;
background-position: bottom left;
z-index: 1;
}
SVG before url encoding :
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="150px" height="15px" viewBox="0 0 150 15">
<g>
<polygon fill="#222" points="0,15 0,0 100,0 150,0"/>
</g>
</svg>
Demo : http://jsfiddle.net/sparkup/21uaffpy/
Or line this maybe : http://jsfiddle.net/sparkup/21uaffpy/18/
30
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
