Img bannt has its original dimensions - 1920 x 540
I need to clip it using svg and it works but about 50 px in both dimensions of the image - are missing
Seems like the image is cropped, not resized
I created the svg file using CorelDraw - if matters
any help ?
.wrapt {
position: relative;
}
.bannt {
display: block;
width: 100%;
margin: 0 auto;
clip-path: url(#cp1);
}
.svg_01 {
position: absolute;
left: 0;
top: 0;
width: 100%;
}
<div class='wrapt'>
<svg class="svg_01" xml:space="preserve" width="1920px" height="540px" version="1.1" style="shape-rendering:geometricPrecision; text-rendering:geometricPrecision; image-rendering:optimizeQuality; fill-rule:evenodd; clip-rule:evenodd" viewBox="0 0 1770.365 497.915">
<defs>
<clipPath id="cp1">
<path class="fil0" d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
</clipPath>
</defs>
</svg>
<img class='bannt' src='bannt/plain_01.jpg' alt='img'>
</div>
The clip path in CSS needs to either fit the image size exactly or be scaled so that it fits.
I will suggest to insert the image into the SVG. When you set the viewBox of the SVG to the size of the clip path, the clip path will fit the inner "coordinate system" of the SVG. If you give the image the same width, it also scales to the size of the SVG.
The "outer size" of the SVG is default 100%. This can be controlled using CSS. It will probably be a good idea to use display block on the SVG.
svg {
display: block;
}
<svg viewBox="0 0 1770 500">
<defs>
<clipPath id="cp1">
<path d="M0 0l1770.365 0 0 497.915c-73.766,0 -147.531,-27.662 -221.296,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.765,0 -147.53,27.662 -221.296,27.662 -73.765,0 -147.53,-27.662 -221.295,-27.662 -73.54,0 -147.079,27.49 -220.619,27.658 25.494,-29.84 30.119,-61.425 -0.516,-76.499 -69.556,-34.225 -40.441,-137.117 -168.281,-144.344 -127.841,-7.226 -197.109,67.562 -186.722,153.564 2.515,20.822 7.328,38.886 14.915,54.45l-102.664 12.833 0 -497.915z"/>
</clipPath>
</defs>
<image width="1770" href="https://via.placeholder.com/1920x540" clip-path="url(#cp1)" />
</svg>
As commented: clip-path is not responsive
.wrapt {
position: relative;
}
.bannt {
display: block;
width: 100%;
height: auto;
clip-path: url(#cp1);
border: 1px solid red;
}
.clipped {
width: 100%;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}
<div class='wrapt'>
<svg width="0" height="0" viewBox="0 0 1770.365 497.915">
<defs>
<clipPath id="cp1">
<path class="fil0" d="M0 0h1770.4v497.9c-73.8 0-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.6-27.6-221.3-27.6s-147.6 27.6-221.3 27.6s-147.5-27.6-221.3-27.6c-73.6 0-147.1 27.4-220.6 27.6c25.5-29.8 30.1-61.4-0.5-76.5c-69.6-34.2-40.5-137.1-168.3-144.3s-197.1 67.5-186.8 153.5c2.6 20.9 7.4 38.9 15 54.5l-102.7 12.8v-497.9z"/>
</clipPath>
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
</clipPath>
</defs>
</svg>
<img class='bannt' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='240' height='240'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='12' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='24' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 240 %C3%97 240 %3C/text%3E%3C/svg%3E">
<img class='bannt --clipped' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E">
</div>
For a responsive clip-path you need to optimize it
img{
max-width:100%;
}
.clipped {
width: 100%;
-webkit-clip-path: url(#my-clip-path);
clip-path: url(#my-clip-path);
}
.resize{
width: 50%;
height: auto;
padding:1em;
overflow:auto;
border:1px solid green;
resize:both;
}
<p>Clip path optimized with: https://yoksel.github.io/relative-clip-path/</p>
<p>Resize me</p>
<div class="resize">
<svg class="svg" width="0" height="0">
<clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
<path d="M0,0 l1,0,0,1 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.056,-0.125,0.056 c-0.042,0,-0.083,-0.056,-0.125,-0.056 c-0.042,0,-0.083,0.055,-0.125,0.056 c0.014,-0.06,0.017,-0.123,0,-0.154 c-0.039,-0.069,-0.023,-0.275,-0.095,-0.29 c-0.072,-0.015,-0.111,0.136,-0.105,0.308 c0.001,0.042,0.004,0.078,0.008,0.109 l-0.058,0.026,0,-1"></path>
</clipPath>
</svg>
<img class='clipped' src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1920' height='540'%3E%3Crect x='0' y='0' width='100%' height='100%' fill='%23ccc' stroke='%23999' stroke-width='27' /%3E%3Ctext x='50%' y='50%' font-family='sans-serif' font-size='54' fill='%23999' dominant-baseline='middle' text-anchor='middle'%3E 1920 %C3%97 540 %3C/text%3E%3C/svg%3E" alt='img'>
</div>
Further reading: About clip-path caveats and pitfalls
Paul LeBeau's solution: "Complex SVG clip-path responsive"
Eric Meyer: Scaling SVG Clipping Paths for CSS Use
Css-tricks: Unfortunately, clip-path: path() is Still a No-Go
Css-tricks: Clipping and Masking in CSS
Clip path helper
Yoksel's clip-path generator
Related
I need to repeat an svg <pattern> on a horizontal <rect>.
I mean, the svg <rect> is larger that the pattern, so I need it to repeate horizontally on whatever space is left.
I want the main pattern to appear in the center, which is exactly what is happening now. I just need to make it repeat on both sides.
Right now, I can only get it to show once.
Note:
The pattern is the black triangle
The 1px dotted red border is from the svg element
.mySvg {
width: 600px;
height: 50px;
border: 1px dotted red;
}
<svg class="mySvg">
<defs>
<pattern id="wave" viewBox="0,0,150,50" width="100%" height="100%">
<path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
</svg>
How can I make the pattern repeat on the space that is left?
Use the SVG as background:
.box {
height:50px;
border:1px solid red;
margin: 5px;
background:
url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 -2 150 52"><path d="M 0 50 l 75 -50 l 75 50" stroke="black" /></svg>')
center/auto 100%;
}
<div class="box"></div>
<div class="box" style="height:100px;"></div>
In your code the pattern is having a width of 100%. It can't repeat. I gave the pattern a width of 25%. Also to make it fall in the middle I'm offsetting the pattern a 12.5% (25/2)
x="12.5%"
.mySvg {
width: 600px;
height: 50px;
border: 1px dotted red;
}
<svg class="mySvg" viewBox="0 0 600 50">
<defs>
<pattern id="wave" x="12.5%" y="0" width="25%" height="100%">
<path d="M 0 50 l 75 -50 l 75 50" stroke="black" stroke-width="2"/>
</pattern>
</defs>
<rect x="0" y="0" width="100%" height="100%" fill="url(#wave)"/>
</svg>
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 have an image clipped with SVG clip-path. And I'm trying to move this clip-path, but with translateX the image dissapears. Looks like the problem is in clipPathUnits="objectBoundingBox". How can I move the path?
svg {
position: absolute;
}
picture {
display: block;
width: 100%;
height: 100%;
}
/* #shape {
transform: translateX(1px);
} */
<svg class="hero-svg" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="2560px" height="1164px" viewBox="0 0 1280 582" version="1.1">
<clipPath id="mask-path" clipPathUnits="objectBoundingBox">
<path
id="shape"
fill="#E5EFF7"
d='M0, 0 L1, 0 L1, 0.4996753848797251 C0.909334453125, 0.6 0.7926289296875, 0.75 0.6498834375, 0.6158118900343643 C0.4357651953125, 0.401758644329897 0.366062217578125, 0.5330226374570446 0.20884810625, 0.5184233780068728 C0.104038698828125, 0.5086905378006873 0.034422663203124995, 0.4739563067010309 0, 0.4142206847079038 Z'
/>
</clipPath>
</svg>
<picture id="hero-bg" style="clip-path: url(#mask-path); -webkit-clip-path: url(#mask-path);">
<img src="https://www.google.es/images/branding/googlelogo/2x/googlelogo_color_272x92dp.png" alt="Doctors" style="width:100%;">
</picture>
I use Google Chrome Version 66.0.3359.181. In Safari translateX do nothing.
There is a fiddle: https://jsfiddle.net/yhw8soq0/
Thanks.
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 have this SVG :
<svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0 L100 100 L0 100" stroke-width="0"></path>
</svg>
This works but I need to have transparent outer and black color inner. In my code this is currently inverse.
How to generate this?
DEMO
Just change the coordinates of your SVG path (d attribute) to form a triangle instead of the shape.
The modified path (d="M0 0 L50 100 L100 0z") works as follow:
M0 0 - Moves the pen to 0,0 (top left corner)
L 50 100 - Draws a line from 0,0 to 50,100 (which is bottom center point)
L 100 0 - Draws a line from 50,100 to 100 0 (which is top right corner)
z - Closes the path by drawing a line from the last point (100,0) to the first point (0,0)
SVG path elements by default get a black colored fill and hence the triangle gets colored black whereas the outside remains transparent.
* {
background: #e1e1e1;
}
.decor {
height: 80px
}
<div class="decor">
<svg class="decor" height="100%" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="100%" xmlns="http://www.w3.org/2000/svg">
<path d="M0 0 L50 100 L100 0z" stroke-width="0"></path>
</svg>
</div>
Clip Image using Path:
If the need is to use the path to clip background image into the required shape then it would be better to use clipPath element and clip-path CSS property like in the below snippet:
* {
background: #e1e1e1;
}
.decor {
height: 80px;
background: url(http://lorempixel.com/200/80);
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
<div class="decor">
<svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0 0 L.5 1 L1 0z"></path>
</clipPath>
</defs>
</svg>
</div>
Putting all the pieces together, the below code should achieve the output that was provided in the image.
.div-1 {
position: relative;
height: 500px;
width: 100%;
}
.decor-top {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image: url('http://lorempixel.com/550/500');
-webkit-clip-path: url(#clipper);
clip-path: url(#clipper);
}
.div-2 {
position: absolute;
bottom: 0;
left: 0;
height: 50%;
width: 100%;
background-image: url('http://kinderhtml.themerex.net/img/bg/texture_2.png');
background-color: green;
-webkit-clip-path: url(#clipper2);
clip-path: url(#clipper2);
}
<div class="div-1">
<div class="decor-top">
<svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipper" clipPathUnits="objectBoundingBox">
<path d="M0 0 L.5 .1 L1 0 1,1 0,1z"></path>
</clipPath>
</defs>
</svg>
</div>
<div class="div-2">
<svg height="0" preserveAspectRatio="none" version="1.1" viewBox="0 0 100 100" width="0" xmlns="http://www.w3.org/2000/svg">
<defs>
<clipPath id="clipper2" clipPathUnits="objectBoundingBox">
<path d="M0 0 L.5 .25 L1 0 1,1 0,1z"></path>
</clipPath>
</defs>
</svg>
</div>
</div>
The original path (d="M0 0 L50 100 L100 0 L100 100 L0 100") worked as follows:
M0 0 - Moves the pen to 0,0 (top left corner)
L 50 100 - Draws a line from 0,0 to 50,100 (which is bottom center point)
L 100 0 - Draws a line from 50,100 to 100 0 (which is top right corner)
L 100 100 - Draws a line from 100,0 to 100,100 (which is bottom right corner)
L0 100 - Draws a line from 100,100 to 0,100 (which is bottom left corner)
Thus the above path ends up a forming a shape which looks like a rectangle with a triangle cut-out at the top.