My hamburger icon resizes, whenever the user zooms in or out.
Is there any way to solve this?
Maybe by changing the units in which the hamburger's width is set?
Note: The hamburger icon is not a picture but a collection of elements.
* {
margin: 0;
padding: 0;
touch-action: none;
}
body {
background-color: #FEFEFE;
}
#header-background {
background-color: #08599d;
height: 35%;
width: 100%;
}
#menu-icon {
resize: none
}
<div id="header-background"/>
<svg id="menu-icon" xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 0 24 24" width="24"><path d="M0 0h24v24H0z" fill="none"/><path d="M3 18h18v-2H3v2zm0-5h18v-2H3v2zm0-7v2h18V6H3z" fill="white"/></svg>
Related
In HTML, I am trying to use SVG graphics to create a background section to a part of my site. It uses a curve that sections off a part of the website to another. I have managed to create a basic outline for the general shape of the SVG: Picture of the animated banner and SVG page section.
However, I am expecting the SVG element to be stretched downwards so it fills out the rest of the page. This is not the case however as when scrolling down the SVG ends and the background takes up the rest of the site: The SVG is too small.
I need help extending the SVG to fill the rest of the page underneath it.
Current HTML Code:
div class="wave">
<svg width="100%" height="200px" fill="none" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<path
fill="white"
d="
M0 67
C 273,183
822,-90
2525.01,98
V 359
H 0
V 67
Z">
</path>
</svg>
</div>
I have tried to change the SVG values but they normally just turn the graphic out of shape. I would like help understanding how to understand and fix this problem.
Futhermore, how to use the SVG viewBox to preserve the aspect ratio of the graphic?
[Update] Here is the website so far. I need to move the SVG graphic downwards as indicated in the arrow so the black particle background is above it: Picture Update
The problem here is you can (see thereafter) "fill" till the end of page, now that means playing with viewport and aspect ratio as said Robert. That means also your "curve" won't be constant regarding different sizes of screen.
Check and play with the snippet thereafter:
.wave {
width: 100vw;
height: 100vh;
}
<div class="wave">
<svg width="auto" height="100%" fill="none" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMinYMin slice">
<path
fill="red"
d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z">
</path>
</svg>
</div>
perhaps this can work for you
you have your wave, plus a rect under
body {
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
}
.wave {
width: 100%;
height: 100%;
}
<div class="wave">
<svg width="auto" height="100%" fill="#ff0000" viewbox="0 0 512 128" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"></path>
<rect width="512" height="129" x="0" y="127" />
</svg>
</div>
I thought about your problem.
If the idea is to have an image fullscreen on home with a wave svg down with a color and continuity same color in other part. An idea would be the following:
body {
margin: 0;
padding: 0;
overflow-x: hidden;
}
section {
min-height: 100vh;
background-color: #999999;
margin: 0;
}
section h2 {
margin: 0;
}
#home {
margin: 0;
padding: 0;
width: 100vw;
background-image: url("https://picsum.photos/1920/1080");
background-size: cover;
background-position: center;
position: relative;
}
#home .title {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
background-color: #7b98bc;
}
.wave {
width: 100%;
height: 100vh;
}
.wave svg {
display: inline-block;
}
<section id="home">
<div class="wave">
<svg width="100%" height="auto" fill="#999999" viewbox="0 0 512 128" preserveAspectRatio="xMinYMax meet" xmlns="http://www.w3.org/2000/svg">
<path d="M 0,75 C 158.44341,97.135847 296.6677,25.650819 512,25 V 128 H 0 Z"/>
</svg>
</div>
<div class="title">
<h2>Title of my website</h2>
</div>
</section>
<section id="part1">
<h2>here we are section part1</h2>
</section>
I'm using some SVG's above and below a div to create an interesting shape that also scales well on small screens. A reduced test case can be seen here:
https://codepen.io/jciw/pen/eYWEazp
The SVG seems to align perfectly sometimes, but when resizing you can see a small (1px) gap between the SVG and the above or below div (to the left and the right). I'm assuming this is a rounding error, but is it solvable?
Reduced test case code:
<div class="container">
<svg class="homepage-rect-top" width="566" height="55" viewBox="0 0 566 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.81142 16.8646L554.811 54.484C560.592 54.883 565.5 50.3017 565.5 44.5078V0.5H0.5V6.88831C0.5 12.1439 4.5683 16.5026 9.81142 16.8646Z" fill="white"/>
</svg>
<div class="homepage-rectangle">
</div>
<svg class="homepage-rect-bottom" width="566" height="55" viewBox="0 0 566 55" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.81142 16.8646L554.811 54.484C560.592 54.883 565.5 50.3017 565.5 44.5078V0.5H0.5V6.88831C0.5 12.1439 4.5683 16.5026 9.81142 16.8646Z" fill="white"/>
</svg>
</div>
body {
background: #999999;
}
.container {
max-width: 80%;
margin: 0 auto;
}
.homepage-rectangle {
background: white;
min-height: 300px;
}
.homepage-rect-bottom {
width: 100%;
height: auto;
display: block;
stroke: white;
}
.homepage-rect-top {
width: 100%;
height: auto;
display: block;
stroke: white;
transform: scaleY(-1);
margin-bottom: -5px;
}
.reverse-it {
transform: scaleX(-1);
}
.flip-reverse-it {
transform: scale(-1);
}
why don't you simply put this in .homepage-rect-bottom:
margin-top:-1px;
in .homepage-rect-top use
margin-bottom: -1px
Ah, I see, ok, well I wouldn't go for an svg in that case, I would play around with something of the likes of this, which you can play around with:
body {
background: #999999;
}
.container{
max-width: 80%;
padding-top: 1rem;
}
.panel--one {
width:100%;
height: 450px;
background: white;
transform: perspective(800px) rotateY(-15deg);
border-radius:2rem;
}
html:
<div class="container">
<div class="panel--one"></div>
</div>
This turned out to be what I think was a rounding issue when using transforms on the SVG's. When using non-transformed SVG's this wasn't an issue.
I have two arrow images (previous / next) with the code here like this:
.fp-controlArrow {
position: absolute;
width: 32px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
height: 32px; /* This does the same as above */
margin-top:-15px; /* This value must always be half of the height - This does the same as above */
z-index: 30;
top: 50%;
cursor: pointer;
}
.fp-controlArrow.fp-prev {
left:0;
background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e923133f8dc0bf994fc49_left-arrow.svg) no-repeat;
}
.fp-controlArrow.fp-next {
right:0;
background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e9231ec03b6c9682b540c_right-arrow.svg) no-repeat;
I would like when I hover over an arrow it a round transparent circle appeared behind the arrow like on this example:
enter image description here
how can I achieve this?
thank you!
padding: 1em;
border-radius: 50%;
background-color: rgba(200,200,200,0.5)
Add those lines to the .fp-controlArrow class That should do it.
Edit
Sorry, I didn't realize it was svg. You will have to inline the svg.
<div class="fp-controlArrow fp-prev">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#221b38" d="M16 20L8 12L16 4"></path>
</svg>
</div>
<div class="fp-controlArrow fp-next">
<svg width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" data-reactroot="">
<path stroke-linejoin="round" stroke-linecap="round" stroke-width="1" stroke="#221b38" d="M8 20L16 12L8 4"></path>
</svg>
</div>
.fp-controlArrow {
position: absolute;
width: 32px; /* This can be added here so you don't have to set a width and height 2 times for each arrow, this will create one width for both arrows */
height: 32px; /* This does the same as above */
margin-top:-15px; /* This value must always be half of the height - This does the same as above */
z-index: 30;
top: 50%;
cursor: pointer;
padding: 1em;
border-radius: 50%;
}
.fp-controlArrow:hover {
background: green;
background-color: rgba(200,200,200,0.5);
}
.fp-controlArrow.fp-prev {
left:0;
}
.fp-controlArrow.fp-next {
right:0;
Here is a codepen that demonstrates it.
Sorry, I didn't saw the space between : and hover.
.fp-controlArrow.fp-prev {
left:0;
background: url(https://uploads-ssl.webflow.com/602dbecd2160ce28b5bc428b/602e923133f8dc0bf994fc49_left-arrow.svg) no-repeat;
border-radius: 50px;
}
.fp-controlArrow.fp-prev:hover{
background-color: #999999;
}
I have to do it like this
I want to make this icon from two elements. There are should be blue background and svg. How can I make this?
This is my code:
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
Use same width & height and add some padding.
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 20px;
height: 20px;
background: #000;
padding: 10px; /* your icon's total width & height is 40px */
border-radius: 8px;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
This is an example using flex on a parent div + hover;
.facebook_logo {
fill: white;
stroke: black;
display: inline-block;
width: 22px;
height: 40px;
}
.facebook_ {
background-color: #3b5998;
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
border-radius: 20%;
transition: .3s;
cursor: pointer;
}
.facebook_:hover {
background-color: grey;
}
<svg display="none">
<symbol id="facebook" viewBox="0 0 23.101 23.101">
<path d="M8.258,4.458c0-0.144,0.02-0.455,0.06-0.931c0.043-0.477,0.223-0.976,0.546-1.5c0.32-0.522,0.839-0.991,1.561-1.406
C11.144,0.208,12.183,0,13.539,0h3.82v4.163h-2.797c-0.277,0-0.535,0.104-0.768,0.309c-0.231,0.205-0.35,0.4-0.35,0.581v2.59h3.914
c-0.041,0.507-0.086,1-0.138,1.476l-0.155,1.258c-0.062,0.425-0.125,0.819-0.187,1.182h-3.462v11.542H8.258V11.558H5.742V7.643
h2.516V4.458z"/>
</symbol>
</svg>
<div class="facebook_">
<svg class="facebook_logo">
<use xlink:href="#facebook"></use>
</svg>
<div>
<svg id=FaceBookLogo width=100px viewBox='0 0 300 300'>
<rect fill='#3b5998' width='100%' height='100%' rx='15%'/>
<path fill='white' d='M110 80c0-1 0-5 1-9 0-5 2-10 6-15 3-5 8-10 16-14 7-4
18-6 31-6h38v42h-28c-3 0-5 1-8 3-2 2-3 4-3 6v26h39c0
5-1 10-1 15l-1 13c-1 4-1 8-2 12h-35v115h-52v-115
h-25v-39h25v-32z'/>
</svg>
<style>
#FaceBookLogo rect{
fill:var(--FBblue,#3b5998);
}
#FaceBookLogo path{
fill:var(--FBwhite,white)
}
#FaceBookLogo:hover{
--FBblue:green;
--FBwhite:gold;
width:150px;
}
</style>
I used https://yqnn.github.io/svg-path-editor/ to multiply the path definition by a scale 10 to get rid of all decimal positions and still maintain some accuracy in the letter F outline.
Now play with the 300 viewBox size to scale the letter, and change M110 80 at the start of the path (x y) to position the letter.
I've created a SVG icon component which wraps SVG icons inside a parent element using the following code:
HTML
<div class="icon-wrapper">
<svg class="icon">
<!--
The "icon-search" symbol comes from a SVG sprite in the doc body.
See live demo below...
-->
<use xlink:href="#icon-search"></use>
</svg>
</div>
CSS
body {
font-size: 48px;
color: black;
}
.icon-wrapper {
background-color: lightgreen;
}
.icon {
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
background-color: red;
}
Even though the height of the wrapping div is set to auto (its initial value) it somehow adds some padding to its bottom and is therefore a few pixels taller than the surrounded SVG. The green area shouldn't be there:
Why is this?
Here's a live example you can play with: https://jsbin.com/huyojeniwi/1/edit?html,css,output
This is because svg image is inline element and the browser saves spase from bottom for such "long" symbols as "p", "q", "y".
There is several solutions to this:
First:
.icon { display: block; }
Second:
.icon-wrapper { font-size: 0; } .icon { font-size: 48px; }
Third
.icon-wrapper { line-heigth: 1em; } .icon { vertical-align: top }
This is happening because svg tag is inline-block element, setting line-height:0; to parent element will fix it.
Inline boxes inherit inheritable properties such as font-size, line-height etc from their block parent element , and creates space/margin.
For more info
body {
font-size: 48px;
color: black;
}
.icon-wrapper {
background-color: lightgreen;
line-height: 0;
}
.icon {
width: 1em;
height: 1em;
stroke-width: 0;
stroke: currentColor;
fill: currentColor;
background-color: red;
}
<!-- Inlined SVG sprite -->
<svg style="position: absolute; width: 0; height: 0; overflow: hidden;" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<symbol id="icon-search" viewBox="0 0 26 28">
<title>search</title>
<path d="M18 13c0-3.859-3.141-7-7-7s-7 3.141-7 7 3.141 7 7 7 7-3.141 7-7zM26 26c0 1.094-0.906 2-2 2-0.531 0-1.047-0.219-1.406-0.594l-5.359-5.344c-1.828 1.266-4.016 1.937-6.234 1.937-6.078 0-11-4.922-11-11s4.922-11 11-11 11 4.922 11 11c0 2.219-0.672 4.406-1.937 6.234l5.359 5.359c0.359 0.359 0.578 0.875 0.578 1.406z"></path>
</symbol>
</defs>
</svg>
<div class="icon-wrapper">
<svg class="icon">
<use xlink:href="#icon-search"></use>
</svg>
</div>