I have some trouble aligning an svg I am new to this thing. I want to see it as a whole and place it at the center of the main container. Need your help guys. Thanks in advance.
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
.css
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
}
svg.morph {
position: absolute;
margin: 0;
background-color: #00ff1f;
}
Please use the correct viewBox="168 140 1065 600" value.
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
height:100vh;
}
svg.morph {
position: absolute;
margin: 0;
max-width:100%;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="168 140 1065 600" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
Center with position absolute:
position absolute:
left:50%;
top:50%;
transform: translate(-50%, -50%);
.main-container {
position: relative;
padding: 0 0 0 20px;
float: right;
width: calc(100% - 240px);
border: 2px solid red; /*<<<<<<<<<<<<<<<<<<<<< Added to see container limit */
}
svg.morph {
position: absolute;
left:50%;
top:50%;
transform: translate(-50%, -50%);
margin: 0;
background-color: #00ff1f;
}
<div class="main-container">
<h1>Hi</h1>
<svg class="morph" viewBox="0 0 1119 619" preserveAspectRatio="none">
<path d="M735.75,229.593c61.129-5.951,122.258-90.759,179.219-89.271s127.815,53.562,166.715,72.9,140.318,49.1,148.654,130.931-16.672,141.346-13.893,187.469,11.114,196.4-186.165,193.42-220.9-122-327.873-89.271-104.2,111.588-308.423,89.271S136.965,405.159,184.2,356.06s33.343-117.54,112.533-119.028,138.929-37.2,205.615-38.684S674.622,235.544,735.75,229.593Z" fill="#EFE9F5" opacity="0.5"/>
</svg>
</div>
Related
I'm trying to use wave SVG and I have a background image at the body
but I want the SVG to be filled with transparent so it shows the body background-image
but when I try to make it fill: transparent or fill-opacity: 0
it just hides all the wave shapes. So is there is a way to replace #000000 with something transparent that shows body background-image?
Here is an example code
https://jsfiddle.net/nLt2vu4k/
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</svg>
</div>
</header>
</body>
</html>
Thank you for helping,
Best regards.
For transparent you can define "fill-opacity" to 0 in path:
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill" fill-opacity="0"></path>
</svg>
</div>
</header>
</body>
</html>
You can use clipPath with your svg
To have a nice result you might have to edit your SVG
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
background-color: cyan;
position: relative;
clip-path: url(#myClip);
}
.shape {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.shape svg {
position: relative;
display: block;
width: calc(128% + 1.3px);
height: 163px;
}
.shape .shape-fill {
fill: #000000;
}
<html>
<body>
<header>
<div class="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<clipPath id="myClip">
<path d="M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z" class="shape-fill"></path>
</clipPath>
</svg>
</div>
</header>
</body>
</html>
Try creating a new svg to cover the header background, and remove the header background-color.
* {
margin: 0;
padding: 0;
}
body {
background-image: url("https://wallpaperaccess.com/full/5131560.jpg");
}
header {
min-height: 20rem;
position: relative;
}
.shape {
position: absolute;
top: 0;
left: 0;
width: 100%;
overflow: hidden;
line-height: 0;
}
.shape svg {
position: relative;
display: block;
width: 100%;
height: auto;
}
<header>
<div class="shape">
<svg width="671" height="221" viewBox="0 0 671 221" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0H671V195C375 304 282 14 0 195V0Z" fill="#0ff"/>
</svg>
</div>
</header>
https://jsfiddle.net/afelixj/7z1L5xdo/3/
I have a circle animation with a centered text inside.
Everything is wrapped into a div.
I'm trying to put this wrapper div on the bottom right of the page.
Any tips about how to archive this without let centered text going outside the circle?
here the code example https://codepen.io/D_s/pen/oNzQdJy
thank you!
html,
body {
height: 100%;
background: lightgrey;
}
.wrapper {
max-width: 50px;
max-height: 50px;
position: absolute;
bottom: 0;
right: 0;
}
.centered {
position: absolute;
color: white;
font: 3vw/3vw times;
height: 50px;
text-align: center;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
position: absolute;
top: calc(50% - 15vw);
left: calc(50% - 15vw);
overflow: hidden;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"/>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%" >SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
update the code like below:
.wrapper {
position: fixed;
bottom: 0;
right: 0;
overflow: hidden;
}
svg {
animation: rotate 10s linear infinite;
width: 25vw;
height: 25vw;
}
.circle-text {
font: 50px/50px times;
letter-spacing: 22.5px;
fill: white;
}
#keyframes rotate {
to {
transform: rotate(360deg);
}
}
.centered {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font: 3vw/3vw times;
margin: 0;
}
body {
background:grey;
}
<div class="wrapper">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xhtml="http://www.w3.org/1999/xhtml" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="10cm" height="10cm" viewBox="0 0 1000 1000" preserveAspectRatio="xMinYMin">
<defs>
<path id="textPath" d="M 250 500 A 250,250 0 1 1 250 500.0001"></path>
</defs>
<text class="circle-text" x="0" y="0" text-anchor="middle"><textPath xlink:href="#textPath" startOffset="50%">SOLIDARITY 🌃 CHATBOT 🌈 </textPath></text>
</svg>
<h1 class="centered">centered</h1>
</div>
Supposedly, all SVG presentation attributes can be used as CSS properties.
And yet preserveAspectRatio appears to be observed only when it is an inline property, not through CSS.
html, body { width: 100%; height: 100%; margin: 0; }
.wrapper {
width: 50%; height: 10%;
}
.box {
padding: 10px; margin: 5px;
border: 5px solid #888; border-radius: 5px;
background-color: #eee; color: #000;
position: relative;
}
rect.rfoo { fill: #8af; }
svg.myrect1 {
position: absolute;
preserveAspectRatio: none;
left:0; top:0; width:100%; height:100%;
}
svg.myrect2 {
position: absolute;
left:0; top:0; width:100%; height:100%;
}
<div class="box wrapper">
<svg class="myrect1" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
<div class="box wrapper">
<svg preserveAspectRatio="none" class="myrect2" viewBox="0 0 300 200">
<rect class="rfoo" x="25" y="25" width="250" height="150"></rect>
</svg>
</div>
Why?
preserveAspectRatio is not a presentation attribute.
I know this is asked a lot, and that z-index cannot work on items that aren't positioned. Yet, I'm clearly missing something here. The goal is to have my header cover most of the page initially, and on a click move up to reveal the body content.
body {
margin: 0;
overflow: hidden;
}
header {
text-align: center;
height: 95vh;
margin: 0;
position: relative;
z-index: 9999;
box-shadow: 0px 5px 10px;
padding-top: 10px;
}
.leaf {
height: 50px;
transform: rotate(135deg);
position: absolute;
bottom: 0;
margin: 0px 0px 20px -25px;
}
.categories {
width: 100%;
text-align: center;
position: absolute;
top: 12%;
z-index: 1;
}
.chars {
border: 1px solid black;
}
<header>
<h1>Title Placeholder</h1>
<svg class="leaf" version="1.1" id="Capa_1" x="0px" y="0px" viewBox="0 0 512 512" style="enable-background:new 0 0 512 512;" xml:space="preserve">
<g>
<g>
<path d="M219.388,46.202c-45.273,7.148-86.333,28.057-118.741,60.466l-7.059,7.059C52.895,154.42,30.486,208.523,30.486,266.07
c0,52.508,18.666,102.144,52.846,141.346L0,490.747L21.253,512l83.33-83.33c39.202,34.18,88.838,52.846,141.346,52.846
c57.548,0,111.65-22.41,152.343-63.102l7.059-7.059c32.409-32.408,53.318-73.469,60.466-118.741L512,0L219.388,46.202z
M436.11,287.924c-6.152,38.957-24.144,74.288-52.03,102.176l-7.059,7.059c-68.705,68.705-178.36,72.098-251.119,10.193
l239.44-239.439l-21.253-21.253L104.647,386.1c-61.904-72.759-58.512-182.414,10.194-251.119l7.059-7.059
c27.888-27.887,63.219-45.879,102.176-52.03l251.79-39.756L436.11,287.924z"/>
</g>
</g>
</svg>
</header>
<div class="categories">
<h2>Characteristics</h2>
<div class="chars leaves"></div>
<div class="chars fruit"></div>
<div class="chars flowers"></div>
<div class="chars twigs"></div>
<div class="chars other"></div>
</div>
IF I understand correctly what you want, there is no z-index issue. Everything is correctly positioned.
The only thing missing is that the header has a transparent background. Adding background-color: white; to the header block in the CSS makes it work.
Hi i have a HTML polygon, this is my code :
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="assets/img/downarrow.png" alt="" />
</div>
</div>
This produces :
I actually want this the other way around, so that the black section is blue and the blue section is transparent. I cant find a way at all to edit the color of the black section i have even tried changing the bodys bg-color.
Here is my css:
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
Can anyone help? Thanks.
Add fill property to polygon and change the background of svg to transparent.
Have a look at the snippet below (use full screen for better view, ignore placeholder image of arrow):
.diag {
position: absolute;
bottom:0;
width:100%;
}
svg {
display: block;
width: 100%;
height: 20vh;
background: transparent;
}
svg polygon {
fill: #38aae1;
}
img {
height: 50px;
position: absolute;
top: 0; bottom: 0;
left: 0; right: 0;
margin: auto;
background: #ef7d00;
border-radius: 50%;
padding: 10px;
}
<div class="full-background">
<div class="diag">
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" />
</svg>
<img src="http://placehold.it/10x10" alt="" />
</div>
</div>
Hope this helps!
Set the polygon fill to the blue color and set the svg background to black in css:
svg{
background: black;
}
and your svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 10" preserveAspectRatio="none">
<polygon points="100 0 100 10 0 10" fill="#38aae1"/>
</svg>