I'm trying to create this view but I'm not sure how to get the image to overlap half way with the black background. I've got an svg with the full wide graphic of the car and line where the line breaks in color.
I'm using Bulma as a framework. How would I get the image to overlap a black container as well as the white container?
Here's an example of what I've got now: https://codesandbox.io/s/bulma-autocomplete-forked-kdu4h?file=/src/index.js
To make the img responsive you want it to keep its aspect ratio while filling the same width as the black element but you want it to be translated up enough that the break between the white and the black line always stays at the top of the container.
This snippet does that by having the img as a child of the black element and the same width as it but translated upwards by just the right % of its height that the black line starts just above the black element. This is almost at 50% of its height, actually just very slightly more.
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
div {
width: 100vw;
height: 50vh;
margin: 0;
padding: 0;
position: relative;
top: 40%; /* just for this demo */
background-color: black;
}
img {
width: 100%;
height: auto;
transform: translateY(-52.5%);
margin: 0;
padding: 0;
position: absolute;
}
<div>
<img src="https://i.stack.imgur.com/mhA4r.png" />
</div>
You could have a svg wave with 2 colors like so
body {
background-color: teal;
}
<svg id="wave" width="740" height="110" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
<path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
</svg>
Then put that down of you top container
.block {
height: 150px;
width: 100%;
}
.black {
background-color: black;
position: relative;
}
#wave {
float:left;
transform: translatey(-50%);
}
<div class="block black"></div>
<svg id="wave" viewBox="0 0 740 110" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1 61.4997C243.5 -30.5003 306.5 2.9997 367 48.9997C427.5 94.9997 592.5 142.999 737 61.4997" stroke="black" stroke-width="5"/>
<path d="M1 63.6579C244.159 -28.917 307.33 4.79235 367.995 51.0798C428.659 97.3672 594.107 145.667 739 63.6579" stroke="white" stroke-width="3"/>
</svg>
<div class="block white"></div>
I have used https://getwaves.io/ to create a wave SVG.
So I have added this svg to my header element:
.page{
height:400px;
width:100%;
background: green;
}
.pls-sticky-header{
position: relative;
height: 150px;
background-color: red;
}
.wave{
position: absolute;
bottom: 0;
left: 0;
width: 100%;
}
<div class="page">
<div class="pls-sticky-header">
<svg viewBox="0 0 1440 200" class="wave">
<path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</div>
<div class="content"></div>
</div>
```
Currently as the window gets larger in size - waves get more space in height - but I don't want such behavior.
I want to make waves get 30% of the header in height, and 100% of width (make them stretch only horizontally), but I'm struggling with it.
Maybe there is an option to make such border for a DIV vlock if it not possible to achieve using SVG.
Simply add preserveAspectRatio="none"
.page {
height: 400px;
width: 100%;
background: green;
}
.pls-sticky-header {
position: relative;
height: 150px;
background-color: red;
}
.wave {
position: absolute;
bottom: 0;
height:30%;
left: 0;
width: 100%;
}
<div class="page">
<div class="pls-sticky-header">
<svg viewBox="0 0 1440 200" class="wave" preserveAspectRatio="none">
<path fill="#ffffff" fill-opacity="1" d="M0,128L40,117.3C80,107,160,85,240,90.7C320,96,400,128,480,154.7C560,181,640,203,720,192C800,181,880,139,960,106.7C1040,75,1120,53,1200,58.7C1280,64,1360,96,1400,112L1440,128L1440,320L1400,320C1360,320,1280,320,1200,320C1120,320,1040,320,960,320C880,320,800,320,720,320C640,320,560,320,480,320C400,320,320,320,240,320C160,320,80,320,40,320L0,320Z"></path>
</svg>
</div>
<div class="content"></div>
You can give a height attribute to the svg. Right now it is modifying the height to match the width. Don't use percentages for the height. because it will change with screen size.
I want to make an svg element wrapper to dynamically resize it. I use svg inside the div of the element to which the wrapper svg-wrapper class is applied. My css looks like this:
.svg-wrapper {
display: inline-block;
position: relative;
width: 100%;
padding-bottom: 100%;
vertical-align: top;
overflow: hidden;
background-color: gray;
}
svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
fill: red;
}
And html so:
<div class="svg-wrapper">
<svg preserveAspectRatio="xMinYMin meet" viewBox="0 0 300 100">
<rect width="100%" height="100%" fill="blue"/>
</svg>
</div>
Example on JSFiddle: http://jsfiddle.net/a2nj971t/
However, as you can see there is a problem that the div does not wrap the svg from below. Is it possible to fix it (Regardless of size of svg)?
I've been trying to scale an SVG to fit a container without using fixed pixel values. From what I've read online this should be possible but I haven't managed to get it to work. Some example code is shown below. Any advice on how I can get the examplesvg svg element to fill the width of the svgcontainer div (just by using HTML and CSS)? Thanks in advance.
body {
background: rgb(17,17,17);
}
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
#examplesvg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div class="svgcontainer">
<svg><use xlink:href="#examplesvg"></use></svg>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="examplesvg" viewBox="0 0 303 103" preserveAspectRatio="xMidyMid">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</symbol>
</defs>
</svg>
EDIT: Updated title to make intended behaviour clearer.
I think your CSS selector is wrong. You don't want to scale the symbol #example-svg, you want to scale the svg element in .svgcontainer. Is something like this what you were looking for?
Other things to note:
You don't need to specify preserveAspectRatio="xMidYMid"; that's equivalent to the default (see MDN/SVG/Attribute/preserveAspectRatio for details).
You had a typo: preserveAspectRatio="xMidyMid"; the y should be uppercase. SVG is super picky about this; you just got lucky because it's also the default. (Something you learn the hard way ;) )
It should be viewBox="-1.5 -1.5 303 103", because SVG borders get drawn half inside the shape, and half outside the shape.
body { background: grey; }
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
.svgcontainer > svg {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
}
<div class="svgcontainer">
<svg><use xlink:href="#examplesvg"></use></svg>
</div>
<svg style="display:none">
<defs>
<symbol id="examplesvg" viewBox="-1.5 -1.5 303 103">
<rect width="300" height="100"
style="fill:blue;stroke-width:3;stroke:black" />
</symbol>
</defs>
</svg>
#zenoArrow, please check the below working snippet for the resolved issue you were facing.
let me explain, what went wrong:
set width and height to the svg within the div svgcontainer. so that it scale fully, if not mentioned it will set the viewBox="0 0 300 100" width and height to the svg
don't use preserveAspectRatio="xMidyMid" instead use preserveAspectRatio="none" to scale/fill the svg as per the parent container, if not added it will scale horizontaly but not vertically.
viewBox="0 0 303 103" should be equal to <rect width="300" height="100", it also depends on your requirement though.
body {
background: rgb(17, 17, 17);
}
.svgcontainer {
width: 400px;
height: 300px;
background: green;
position: relative;
}
.example-svg {
width: 100%;
height: 100%;
}
<svg style="display: none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="examplesvg" viewBox="0 0 300 100" preserveAspectRatio="none">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</symbol>
</defs>
</svg>
<div class="svgcontainer">
<svg class="example-svg">
<use xlink:href="#examplesvg"></use>
</svg>
</div>
I am trying to make the background image and SVG responsive. I have got them both in a container,where both are responsive from their own perspectives. But When I test it by Stretching the browser in and out,the SVG gets displaced. I need to fix the SVG overlays over the background image,where they will be settled at the position of the image I have set them.
<!DOCTYPE html>
<html>
<head>
<style>
.container {
background: url(http://i.imgur.com/b1K76Pf.jpg) no-repeat;
background-size: contain;
max-width: 960px;
height: 565px;
margin: auto;
}
</style>
</head>
<body>
<div class="container">
<div class="main-roof">
<svg width="100%" height="100%" viewbox="0 0 1200 180"
preserveAspectRatio="none">
<polygon fill="red" points="115,103 643,93 930,47 372,72">
</polygon>
<polygon fill="red" points="30,120 170,112 649,105 513,118 ">
</polygon>
<polygon fill="red" points="610,49 642,57 600,56 576,57">
</polygon>
</svg>
</div>
</div>
</body>
</html>
P.S. I have tried the .container with width and height of % and auto,but in that case,the image just doesn't show up.
So to close this question I summon up our comments as an answer.
I cannot reproduce your described behavior. I made a fiddle: https://jsfiddle.net/aL7keb3u. I ran it in FF54 and Chrome59. In both browsers the SVG resized the same as the bg-image in the container.
You want a SVG which scales according to the browser window, but in the same aspect ratio as the (background) image. Without having to set absolute pixel values, but relative ones. Right? If so, may that be helpfull to you: https://jsfiddle.net/aL7keb3u/4?
HTML:
<div class="container">
<img src="http://i.imgur.com/b1K76Pf.jpg" class="bg_image" />
<div class="main-roof">
<svg width="100%" height="100%" viewbox="0 0 1200 180"
preserveAspectRatio="none">
<polygon fill="red" points="115,103 643,93 930,47 372,72">
</polygon>
<polygon fill="red" points="30,120 170,112 649,105 513,118 ">
</polygon>
<polygon fill="red" points="610,49 642,57 600,56 576,57">
</polygon>
</svg>
</div>
</div>
CSS:
.container {
/*background: url(http://i.imgur.com/b1K76Pf.jpg) no-repeat;*/
/*background-size: contain;*/
max-width: 960px;
/*height: 565px;*/
margin: auto;
position: relative;
}
/* ---------------------- */
.container > img.bg_image {
width: 100%;
height: auto;
}
.main-roof {
max-width: 100%;
max-height: 100%;
overflow: hidden;
mix-blend-mode: multiply; /* nice effect */
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
svg {
/*height: 565px;*/
width: 100%;
height: 103.5%;
}
As you yourself stated the issue was due to invalid HTML. Please validate your HTML first, when you run into (inexplicable) issues.