I'm trying to disable the scrolling of the svg. I tried to put the property overflow to hidden or visible but the svg still to scroll.
I created the jsfiddle here.
https://jsfiddle.net/pct8rL03/1/
.svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.wave-container {
display: inline-block;
position: absolute;
width: 100%;
vertical-align: middle;
overflow: hidden;
}
<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>
Thank you in advance
Try using this for your wave-container css and you don't need to give a position and display css for your svg. The css for your wave-container should be enough. Hope this helps
.wave-container {
width: -webkit-fill-available;
height: -webkit-fill-available;
vertical-align: middle;
overflow: hidden;
}
<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>
<div class="wave-container">
<svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">
<path d="M0,95 C90,130 250,0 500,100 L500,00 L0,0 Z" style="stroke: none; fill:#e0efe3;"></path>
</svg>
</div>
body{
margin:0px 0px;
padding:0px px;
}
.svg {
display: inline-block;
position: absolute;
top: 0;
left: 0;
}
.wave-container {
display: inline-block;
position: absolute;
width: 100%;
vertical-align: middle;
overflow: hidden;
height:100%;
}
There is nothing to do here. Your SVG is just to big and add to much blank space at the bottom. To fix it just update your SVG file.
Not a good practice:
You can use the property overflow: hidden; on your .wave-container but to make it work you have to set a height or max-height to it
I have an SVG overlay that is a shape with a hole punched out of it. Is there anyway I can set it so the overlay is effectively pinned to the bottom right corner and keeps the circle in proportionately the same position, whilst expanding the rest of the SVG to fill the remaining area of the container?
I've managed to get the SVG to (seemingly) stay in the bottom right corner, but I can't work out how to get it to fill the rest of the container? I'll need to do this without contorting the circle shape obviously.
codepen: https://codepen.io/emilychews/pen/KQmZEd
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
}
<div id="box">
<svg id="overlay" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 232.71 170.5"><g id="Layer_2" data-name="Layer 2"><g id="Layer_2-2" data-name="Layer 2-2"><path d="M0,0V170.5H232.71V0ZM187.37,148.19a23,23,0,1,1,23-23h0A23,23,0,0,1,187.37,148.19Z" transform="translate(0 0)" fill="#015668"/></g></g></svg>
</div>
I would consider another idea to create the hole using mask where you can easily control the circle position and size. Then the trick is to make the whole svg to overflow with big width/height to always cover the div and to keep the same size of the circle:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:1000px;
height:1000px;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 400" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="20" cx="370" cy="370" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=400 mask="url(#hole)" fill="green" />
</svg>
</div>
If you want the circle to be resized on width change you can try this:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:100%;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 10000" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="80" cx="300" cy="9900" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="green" />
</svg>
</div>
And you can easily have the opacity you needed in the previous question:
body {
width: 100%;
height: 100vh;
padding: 0;
margin: 0;
display: flex;
}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
#overlay {
position: absolute;
bottom: 0;
right: 0;
width:100%;
}
<div id="box">
<svg id="overlay" viewbox="0 0 400 10000" >
<defs>
<mask id="hole">
<rect width="100%" height="100%" fill="white"/>
<!-- This circle is your hole -->
<circle r="80" cx="300" cy="9900" fill="black"/>
</mask>
</defs>
<rect x=0 y=0 width=400 height=10000 mask="url(#hole)" fill="rgba(0,0,255,0.5)" />
</svg>
</div>
Here's how I would do it. I'll provide step-by-step instructions so it's easier to follow the "magic". :)
The idea is to use a simple square SVG with a viewBox width and height of 100x100. Then we can position the circle that will be our future hole in the bottom right of the viewBox.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100">
<rect x="0" y="0" width="100" height="100" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
Then we use preserveAspectRatio="xMaxYMax meet" to tell the renderer that we want the SVG contents in the bottom right corner.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<rect x="0" y="0" width="100" height="100" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
The next step is make the rectangle wider and start off the left of the viewBox so that it fills the area of the viewport that is to the left of the SVG. We'll do that by making it start at x="-900" and be width="1000". That means it extends to the left 9X more than the (100 wide) viewBox. That should make it more than wide enough to cater for even the most humongous monitors around.
We will also do the same thing in the vertical direction. Just in case the viewport ever gets tall and skinny. That can happen if you resize the window so that it has narrow width.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</svg>
</div>
Finally, we convert this to a mask and apply it to a rectangle that fills the viewport the same way.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 200px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<defs>
<mask id="mymask">
<rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</mask>
</defs>
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
</svg>
</div>
For a final test. Let's make the "box" bigger to check it is properly responsive. We'll make it 400px high this time. Try resizing the browser windo to check the responsiveness.
body {
width: 100%;
height: 100vh;
padding: 0; margin: 0;
display: flex;}
#box {
margin: auto;
position: relative;
width: 33%;
height: 400px;
background: url(https://lorempixel.com/400/400/) center/cover;
overflow: hidden;
}
<div id="box">
<svg width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMaxYMax meet">
<defs>
<mask id="mymask">
<rect x="-900" y="-900" width="1000" height="1000" fill="white" fill-opacity="0.9"/>
<circle cx="70" cy="70" r="20" fill="black"/><!-- the hole -->
</mask>
</defs>
<rect x="-900" y="-900" width="1000" height="1000" fill="#015668" mask="url(#mymask)"/>
</svg>
</div>
I have a problem with scaling my inline SVG which is used for clip-path only. The element which is clipped has a width of 150px and a height of 150px. It's the 2nd day I'm trying to fix this, but I feel like running in circles.
In Chrome (latest) the SVG has the correct width of 150px.
In Opera (latest) the SVG has the correct width of 150px
In Firefox (54.0.1) the SVG doesn't have the correct width.
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
#clipPath {
transform: scale(2.63, 2.63);
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox">
<!-- <path d="M28.487,10.847C21.13-6.364,0.18-2.348,0.08,17.628C0,33.538,27.699,46.784,28.531,49.636C29.285,46.675,57,33.785,56.92,17.509C56.823-2.517,35.506-5.678,28.487,10.847z">-->
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>
Apply transform using attribute, not via CSS to fix this in Firefox.
body {
background: #333;
}
.image {
background-size: cover;
background-repeat: no-repeat;
background-position: center center;
clip-path: url(#clipPath);
height: 150px;
left: 0;
position: absolute;
top: 0;
width: 150px;
}
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" viewBox="0 0 1 1">
<defs>
<clipPath id="clipPath" clipPathUnits="objectBoundingBox" transform="scale(2.63, 2.63)">
<path d="M0.189913333333,0.0723133333333C0.140866666667-0.0424266666667,0.0012-0.0156533333333,0.000533333333333,0.11752C0,0.223586666667,0.18466,0.311893333333,0.190206666667,0.330906666667C0.195233333333,0.311166666667,0.38,0.225233333333,0.379466666667,0.116726666667C0.37882-0.01678,0.236706666667-0.0378533333333,0.189913333333,0.0723133333333z">
</path>
</clipPath>
</defs>
</svg>
<div class="image" style="background-image: url('https://images.unsplash.com/photo-1468793195345-d9d67818016d?dpr=1&auto=format&fit=crop&w=1500&h=994&q=80&cs=tinysrgb&crop=');"></div>
I've been pulling my hair out trying to make a div center itself vertically.
The div itself contains an svg image, some text below the image, and is floated right and displayed inline-block. To the left of the image, also in the container div, is some text displaying the title. If the text of the title is rendered across >1 lines, the image must float in the middle.
This means that the height is dynamic and i won't know in advance.
I have tried the table solution to this problem, but cannot get it to work due to the div i want to vertically center is already display: inline-block and cannot figure out how to make it work for display: table.
.like-container {
}
.like-div {
display: inline-block;
float: right;
font-size: 10px;
margin-right: 100px;
}
.title {
font-size: 40px;
width: calc(100% - 100px);
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is the Title!
</div>
</div>
I created a plnkr to help show you how it looks: http://plnkr.co/edit/qzqTjQ8W7jl72nRKd6Sj
Sweet jesus help me!
I suggest to use flexbox + align-items for centering + order for controlling the position, width your existing markup, see the support details, and relevant prefixes.
jsfiddle
.like-container {
display: flex;
align-items: center;
}
.like-div {
font-size: 10px;
margin-right: 100px;
order: 1;
}
.title {
font-size: 40px;
flex: 1;
}
If you need to support IE9, you can use this CSS table layout, but you'll need to adjust the markup, place <div class="title"> before <div class="like-div">.
jsfiddle
.like-container {
display: table;
width: 100%;
}
.title, .like-div {
display: table-cell;
vertical-align: middle;
}
.title {
font-size: 40px;
width: 100%;
}
.like-div {
font-size: 10px;
padding-right: 100px;
}
You can achieve vertical centering by using Flexbox. Here is the code
fiddle: https://jsfiddle.net/qbyxkf71/
HTML
<div class="like-container">
<div class="title">This is the Title!</div>
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve">
<path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z" />
<path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z" />
</svg> <span>Like</span>
</div>
</div>
CSS
.like-container {
border:1px solid;
display:flex;
align-items:center;
}
.like-div {
display: inline-block;
float: right;
font-size: 10px;
margin-right: 100px;
}
.title {
font-size: 40px;
width: calc(100% - 100px);
}
you may use direction and drop float : (for old browsers)
.like-container {
direction: rtl;
}
.like-div {
display: inline-block;
font-size: 10px;
vertical-align: middle;
width: 2em;
direction: ltr;
}
.title {
font-size: 40px;
width: calc(100% - 0.65em);
display: inline-block;
vertical-align: middle;
direction: ltr;
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is<br/> the Title!
</div>
</div>
or use display:flex; for young browsers (most efficient IMHO )
.like-container {
display: flex;
flex-direction: row-reverse
}
.like-div {
font-size: 10px;
margin: auto;
}
.title {
font-size: 40px;
flex: 1
}
<div class="like-container">
<div class="like-div">
<svg xmlns:x="http://ns.adobe.com/Extensibility/1.0/" xmlns:i="http://ns.adobe.com/AdobeIllustrator/10.0/" xmlns:graph="http://ns.adobe.com/Graphs/1.0/" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" viewBox="0 0 283.46 283.46" enable-background="new 0 0 283.46 283.46" xml:space="preserve"><metadata><sfw xmlns="http://ns.adobe.com/SaveForWeb/1.0/"><slices/><sliceSourceBounds x="12.691" y="27.241" width="269.84" height="254.219" bottomLeftOrigin="true"/></sfw></metadata><path d="M12.691,251.967c0,2.349,1.904,4.252,4.252,4.252h38.293c2.348,0,4.252-1.903,4.252-4.252V131.653 c0-2.348-1.904-4.252-4.252-4.252H16.943c-2.348,0-4.252,1.904-4.252,4.252V251.967z"/><path d="M278.918,147.336c-8.606-14.737,11.983-21.831-5.778-35.607c-22.375-17.355-20.925-14.647-69.32-15.194 c-7.65-0.086-17.099,0.772-14.633-15.114c9.885-63.703-6.41-75.53-17.217-78.504c-22.753-6.26,4.787,19.854-23.702,68.758 c-2.513,4.313-10.086,9.271-15.194,17.567c-10.544,17.125-20.681,44.156-29.436,44.156c-6.252,0-22.42,0-36.091,0v108.504 c20.458-1.617,49.586-3.924,56.862-4.523c11.514-0.949,21.01,6.97,38.104,6.97c15.194,0,24.823,9.421,76.594,1.481 c7.314-1.121,20.896-15.174,18.194-26.576c-2.084-8.804,22.768-15.721,17.405-31.809 C268.403,168.538,290.992,168.011,278.918,147.336z"/></svg>
<span>Like</span>
</div>
<div class="title">
This is<br/> the Title!
</div>
</div>
this may help you, here is a centered div in the most general form
div {
width: 100px;
height: 100px;
border: 1px solid black;
position: absolute;
top:0;
bottom: 0;
left: 0;
right: 0;
margin: auto;
}
<div>my div here</div>