I'm trying to build a page with 2 polygons, but i'm facing some problems with aspect ratio on mobile or tablet mode.
Check the codepen and resize the window, you will see that the red triangle doesn't keep correct shape as well as the icon inside.
Would be really nice if you can help me to accomplish this.
Best regards and thanks a lot
body {
overflow: hidden;
}
.wrap-layer {
position:absolute;
top:0;
height:100%;
width:100%;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
z-index:1;
top: 50%;
right:55%;
color: #fff;
}
svg {
width: 100%;
height: 100%;
min-height: 100%;
}
#play {
content: "\e907";
font-family: 'icomoon' !important;
fill: #fff;
font-size:5px;
}
<body>
<div class="wrap-layer">
<div class="content">
<h1>Bla bla</h1>
<p>lorem ipsum</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="none">
<polygon id="blue" points="80 0, 50 100, 0 100, 0 0" fill="#000" />
<!-- HOW TO KEEP SHAPE OF THE RED TRIANGLE IN RESPONSIVE -->
<!-- HOW ADD font icon and KEEP THE SHAPE -->
<g>
<polygon id="trigger-play" points="50 100, 56 80, 62 100" fill="red" />
<text id="play" x=53 y=95></text>
</g>
</svg>
</div>
</body>
Codepen : https://codepen.io/lulu2312/pen/oVQegd
Change the preserveAspectRatio="none" attribute to:
preserveAspectRatio="xMidYMax slice"
The xMid part means centre in the X direction. YMax means bottom align in the Y direction. The purpose of that is to ensure the red triangle will be visible. The slice means grow the SVG so that it completely fills the parent, overflowing if necessary. Basically the same as CSS's background-size: cover.
You can learn more about how preserveAspectRatio works in the SVG specification.
https://www.w3.org/TR/SVG11/single-page.html#coords-PreserveAspectRatioAttribute
If the current angles and shapes are not what you want, then you will need to redesign the SVG so it has a different aspect ratio. At the moment it is 1:1 (square).
body {
overflow: hidden;
}
.wrap-layer {
position:absolute;
top:0;
height:100%;
width:100%;
min-height: 100%;
min-width: 100%;
}
.content {
position: absolute;
z-index:1;
top: 50%;
right:55%;
color: #fff;
}
svg {
width: 100%;
height: 100%;
min-height: 100%;
}
#play {
content: "\e907";
font-family: 'icomoon' !important;
fill: #fff;
font-size:5px;
}
<div class="wrap-layer">
<div class="content">
<h1>Bla bla</h1>
<p>lorem ipsum</p>
</div>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="100%" height="100%" viewBox="0 0 100 100" preserveAspectRatio="xMidYMax slice">
<polygon id="blue" points="80 0, 50 100, 0 100, 0 0" fill="#000" />
<!-- HOW TO KEEP SHAPE OF THE RED TRIANGLE IN RESPONSIVE -->
<!-- HOW ADD font icon and KEEP THE SHAPE -->
<g>
<polygon id="trigger-play" points="50 100, 56 80, 62 100" fill="red" />
<text id="play" x=53 y=95></text>
</g>
</svg>
</div>
https://codepen.io/PaulLeBeau/pen/BbGwKp
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>
Hi guys, i'm using svg shaper generated from shapedivider an how you can see, there is a white line and i don't why its there and how to remove it. Could you please help me?
there is the code of the shape divider:
.custom-shape-divider-bottom-1640714253 {
width: 100%;
overflow: hidden;
line-height: 0;
transform: rotate(180deg);
}
.custom-shape-divider-bottom-1640714253 svg {
position: relative;
display: block;
width: calc(100% + 1.3px);
height: 115px;
}
.custom-shape-divider-bottom-1640714253 .shape-fill {
fill: #FF2E63;
}
<div class="custom-shape-divider-bottom-1640714253" id="shape">
<svg data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120" preserveAspectRatio="none">
<path d="M1200 120L0 16.48 0 0 1200 0 1200 120z" class="shape-fill"></path>
</svg>
</div>
Here are four examples. The first two uses an SVG as background or positioned in the bottom of the <div>. They both have a white triangle to cut off the background color. This will leave a solid background.
The third example is using CSS clip-path to cut off the triangle in the bottom. In this example the height of the triangle is a bit hard to calculate. But one advantage is that the triangle is transparent.
The fourth example looks a lot like yours. In this example I translate the <path> -1 unit on the y-axis, so that the upper border of the SVG is not "antialiasing".
.photocollage {
height: 200px;
background: #FF2E63 url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxMjAwIDEyMCI+PHBhdGggZD0iTSAwIDAgTCAxMjAwIDEyMCBMIDAgMTIwIFoiIGZpbGw9IiNGRkYiLz48L3N2Zz4=');
background-repeat: no-repeat;
background-position: center bottom;
background-size: 101% auto;
}
.photocollage2 {
background: #FF2E63;
position: relative;
}
.photocollage2 svg {
position: absolute;
bottom: 0;
}
.photocollage3 {
height: 200px;
background: #FF2E63;
clip-path: polygon(0 0, 100% 0, 100% 100%, 0 calc(100% - 80px));
}
.photocollage4 {
height: 160px;
background: #FF2E63;
}
<p>Example 1</p>
<div class="photocollage"></div>
<p>Example 2</p>
<div class="photocollage2">
<div style="height: 200px;"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path d="M 0 0 L 1200 120 L 0 120 Z" fill="#FFF"/>
</svg>
</div>
<p>Example 3</p>
<div class="photocollage3"></div>
<p>Example 4</p>
<div class="photocollage4"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1200 120">
<path transform="translate(0 -1)" d="M 0 0 L 1200 0 L 1200 120 L 0 1 Z" fill="#FF2E63"/>
</svg>
Try giving the svg a very small negative margin-top, one or two pixels should do the trick.
It should pull the shape up ever so slightly to bridge the gap.
I need to stretching one of the three svg in a block. So, first and last svg must be always 100px width and second svg should be 100px, 200px, 1000px, but they must be closed to each other without between space.
HTML
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
CSS
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 500px;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
JSFIDDLE
As the container is flex, you can just add flex-grow:1; to the svg you want to grow:
svg {
width: 100px;
height: 100px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
}
svg rect.st0 {
fill: blue;
}
.container {
display: flex;
}
.container svg:nth-child(2) {flex-grow:1;}
<div class="container">
<svg viewBox="0 0 100 100">
<rect class="st0" width="100px" height="100px"/>
</svg>
<svg viewBox="0 0 500 100" preserveAspectRatio="none">
<rect class="st1" width="500px" height="100px"/>
</svg>
<svg viewBox="0 0 100 100">
<rect class="st2" width="100px" height="100px"/>
</svg>
</div>
If you are wanting set widths of 100, 200 and 1000, then you will need to use media queries and define when you want those widths to be used
Here is some alternative static solution i dont know it helps or not but yes you can control individual svg by css.
.container {
display: flex;
align-items:center;
}
svg {
width: 100%;
height: 100px;
}
svg:nth-child(2) {
width: 1000px;
}
svg rect.st2 {
fill: red;
}
svg rect.st1 {
fill: green;
width: 2000px;
}
svg rect.st0 {
fill: blue;
}
JSFIDDLE
I want to implement SVG clip-path for SVG element. I have a DIV element in which I want to put SVG element which will act as a clipping mask, and also I have the separate SVG element that has an image to which the clipping mask will be applied.
The first problem I faced with is that clipping mask moves to the left top corner of the viewport but not located inside of the parent DIV element.
The second problem is that I want to make an image on the full screen not depending on the screen size.
Incorrect Mask Circle
Correct Mask Circle (what I want to have)
Do you have suggestions how to make it?
Thanks in advance!
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.svg-wrapper {
width: 72px;
height: 72px;
padding: 2.5em;
border: 1px solid #4D4F51;
margin: 0 auto;
border-radius: 50%;
overflow: hidden;
position: fixed;
top: 55%;
z-index: 9;
left: 64%;
transform: translateY(-50%);
cursor: pointer;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
</svg>
<div class="svg-wrapper">
<svg class="svg-defs">
<defs>
<clipPath id="clipping">
<circle r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
</svg>
</div>
That's not the way SVG works.
When you tell something to use a clip path, all it sees is the clip path definition itself. It doesn't know or care about where on the page you have positioned it's parent <svg>.
If you want the clip circle to be at a certain position on the water image, you need to specify its position using cx and cy.
html, body { margin:0; padding:0; overflow:hidden }
svg { position:absolute; top:0; left:0;}
.image-clip-src {
width: 100%;
height: 100%;
}
.clipped-image image {
clip-path: url(#clipping);
}
<svg class="clipped-image" width="100%" height="100%" viewBox="0 0 1440 960" preserveAspectRatio="xMinYMin meet">
<defs>
<clipPath id="clipping">
<circle cx="64%" cy="55%" r="72" stroke="black" stroke-width="3"/>
</clipPath>
</defs>
<image class="image-clip-src" xlink:href="https://images.unsplash.com/photo-1526327227970-4bda49fa3489?ixlib=rb-0.3.5&ixid=eyJhcHBfaWQiOjEyMDd9&s=3c4bce33d96df6b18af53fb2dae3363e&auto=format&fit=crop&w=1650&q=80" width="100%" height="100%" overflow="visible"/>
<circle cx="64%" cy="55%" r="72" fill="none" stroke="#4D4F51" stroke-width="1"/>
</svg>
I am trying to make .main-div like this image
.main-div {
width: 100px;
height: 100px;
background-color: Red;
border-radius: 30px/20px;
}
<div class="main-div"></div>
My JSFiddle is here.
You can do a trick using a pseudo element and achieve that shape
body {
background: lightgray;
}
.main-div {
position: relative;
display: inline-block;
width: 110px;
height: 100px;
background-color: red;
border-radius: 30%/50%;
background: url(https://i.stack.imgur.com/CWoXa.png) center center no-repeat;
background-size: 110px 110px;
}
.main-div::after {
content: '';
position: absolute;
left: 5px;
top: -5px;
width: 100px;
height: 110px;
background: inherit;
background-size: inherit;
border-radius: 50%/30%;
}
.main-div+.main-div {
background: gray;
}
<div class="main-div"></div>
<div class="main-div"></div>
As Justinas remarked in their answer, the border of your example image does not look like it can be recreated with border-radius alone. This is because the outline is not an ellipse.
It is possible to do this, with good browser support, using SVG as follows.
/* set size of and center SVG */
svg {
display: block;
width: 200px;
height: 200px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
</defs>
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</svg>
This uses clipping in SVG with the clipPath element. You can define any path to use for the clipping. I have used four Bezier curves here. You can tweak where the control points are, or change this to use something entirely different if you wish.
An extra bonus of this approach is that it is now easy to apply other (advanced) filters, for example blurring the image or applying a drop shadow.
/* set size of and center SVG */
svg {
display: block;
width: 204px;
height: 204px;
margin: 0 auto;
}
<svg version="1.1"
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<clipPath id="outline">
<!-- use Bezier curves to define outline -->
<path d="M 0 100
C 0 0, 40 0, 100 0
C 160 0, 200 0, 200 100
C 200 200, 160 200, 100 200
C 40 200, 0 200, 0 100
Z" />
</clipPath>
<filter id="dropshadow" x="-30%" y="-30%"
width="160%" height="160%"
color-interpolation-filters="sRGB">
<!-- define color of shadow here -->
<feComponentTransfer in="SourceAlpha">
<feFuncR type="linear" slope="0"
intercept="0.518"></feFuncR>
<feFuncG type="linear" slope="0"
intercept="0.698"></feFuncG>
<feFuncB type="linear" slope="0"
intercept="0.867"></feFuncB>
</feComponentTransfer>
<!-- define blur of shadow here -->
<feGaussianBlur stdDeviation="2" />
<!-- we can offset the shadow -->
<feOffset result="shadow" dx="1" dy="1" />
<!-- put shadow below original content -->
<feBlend in="SourceGraphic"
in2="shadow" mode="normal" />
</filter>
</defs>
<g transform="translate(2, 2)"
filter="url(#dropshadow)">
<image x="0" y="0" width="200" height="200"
xlink:href="https://placehold.it/200"
clip-path="url(#outline)" />
</g>
</svg>
Your image radius does not look like standard CSS border radius. If yes, than you need to use image preprocessing (in back-end side, e.g. GD or stand-alone tool like Photoshop) or use Clipping Mask with limited support. Using border radius you can have similar effect.
.main-div {
width: 100px;
height: 100px;
background-color: red;
border-radius: 40%;
overflow: hidden;
position: relative;
}
.main-div img {
width: 100%;
position: absolute;
left: -50px;
top: -50px;
margin-top: 50%;
margin-left: 50%;
}
<div class="main-div">
<img src="http://lorempixel.com/200/200/"/>
</div>
Add this style. You can change border-radius as per your requirements:
div {
border: 2px solid #a1a1a1;
padding: 10px 15px; `enter code here`
background: #dddddd;
width: 100px;
border-radius: 55px;
}
.element {
border-radius: 50px;
overflow: hidden;
}
<img src="https://image.ibb.co/irvmO5/html5.png" alt="html5" border="0" class="element"><br /><a target='_blank' href='https://imgbb.com/'>Rounded rectangle clip mask</a>