Problem:
I've created an SVG Clip Path which needs to be responsive, but when I try to use clipPathUnits="objectBoundingBox" in the clip path tag, it makes the target object disappear.
I made example snippets with and without. The first one shows as expected, but the second is completely hidden.
I've tested it with various simple shapes and paths which work fine, but I can't get clipPathUnits="objectBoundingBox" working with anything more complicated, not sure what I'm missing.
Snippet:
body {
background: #333;
}
#hero {
background: url(https://source.unsplash.com/random);
height: 120vh;
background-color: #ff0000;
width: 100vw;
background-size: cover;
clip-path: url(#wav);
}
#hero2 {
background: url(https://source.unsplash.com/random);
height: 120vh;
background-color: #ff0000;
width: 100vw;
background-size: cover;
clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<clipPath id="wav" >
<path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
</clipPath>
</svg>
<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<clipPath id="wav2" clipPathUnits="objectBoundingBox">
<path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
</clipPath>
</svg>
Resources:
https://www.w3.org/TR/SVG11/masking.html#ClipPathElementClipPathUnitsAttribute
https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/clipPathUnits
https://www.sarasoueidan.com/blog/css-svg-clipping/
When using clipPathUnits="objectBoundingBox" the width and height of the object bounding box of the clipping path are considered to have a length of 1 unit value.
In order to achieve this you either need to rewrite the d attribute of the path or you can scale the path. In this case I use transform="scale(0.00118,0.0017)"
<clipPath id="wav" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00118,0.0017)" id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.....
In order to know what value to use
I get the bounding box of the path:
let bb=thePath.getBBox();
I use the bb.width and bb.height to get the scale:
let sx = 1/bb.width;
let sy = 1/bb.height
I scale the path:
thePath.setAttribute("transform", scale(${sx},${sy}))
body {
background: #333;
}
#hero {
background: url(https://source.unsplash.com/random);
height: 120vh;
background-color: #ff0000;
width: 100vw;
background-size: cover;
clip-path: url(#wav);
}
#hero2 {
background: url(https://source.unsplash.com/random);
height: 120vh;
background-color: #ff0000;
width: 100vw;
background-size: cover;
clip-path: url(#wav2);
}
<div id="hero"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<clipPath id="wav" clipPathUnits="objectBoundingBox">
<path transform="scale(0.00118,0.0017)" id="thePath" d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
</clipPath>
</svg>
<div id="hero2"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
<clipPath id="wav2" clipPathUnits="objectBoundingBox">
<path d="M815.8,19.7c-18.9,0-18.7,15.3-37.9,15.3-17.6,0-19.6-13-38-13-15,0-14.9,11.1-38,11.1C672.5,33.1,676,4.6,640,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18s-32.8,15.9-49.9,15.9c-13.1,0-19.7-4-26.3-9.7h0c-6.5-5.6-13.2-13-26.3-13C375.8,19.7,376,35,356.9,35c-17.6,0-19.7-13-38-13-15.1,0-14.9,11.1-38,11.1C251.5,33.1,255,4.6,219,4.6s-40.1,39.9-79.8,39.9c-33,0-38.7-18-63-18S43.3,42.4,26.3,42.4c-13.1,0-19.7-4-26.3-9.7V562.6c6.5,5.6,13.2,12.9,26.2,12.9,18.9,0,18.7-15.2,37.9-15.2,17.6,0,19.6,12.9,38,12.9,15,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.8-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6h0c6.5,5.7,13.2,13,26.3,13,18.9,0,18.7-15.2,37.8-15.2,17.6,0,19.7,12.9,38,12.9,15.1,0,14.9-11,38-11,29.4,0,25.9,28.5,61.9,28.5s40.1-39.9,79.8-39.9c33,0,38.7,18,63,18s32.9-15.9,49.9-15.9c13.1,0,19.7,4,26.3,9.6V32.7C835.5,27.1,828.8,19.7,815.8,19.7Z" />
</clipPath>
</svg>
This is from Sara Soueidan's article:
when you use the objectBoundingBox value, the coordinates specified for the contents of the <clipPath> must be in the range [0, 1]
And this is from MDN:
objectBoundingBox
This value indicates that all coordinates inside the element are relative to the bounding box of the element the clipping path is applied to. It means that the origin of the coordinate system is the top left corner of the object bounding box and the width and height of the object bounding box are considered to have a length of 1 unit value.
Related
I've the following SVG path that is intended to be used as a border of any possible width and height. But currently, I am struggling with the following 2 points and appreciate a lot if some can share some ideas :-)
1. Is it possible to detach SVG from the viewBox and adapt to parent dimension?
2. Is it possible to detach SVG stroke width and always be as defined? (4px)
.c500x200 {
width: 500px;
height: 200px;
}
.c200x600 {
width: 200px;
height: 600px;
}
svg {
width: 100%;
height: 100%;
}
svg path {
stroke-width: 4px;
stroke: #d22f2c;
fill: none;
}
<div class='c500x200'>
<svg data-name="Layer 1" viewBox="0 0 357.5 248" xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
<path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
</svg>
</div>
<div class='c200x600'>
<svg data-name="Layer 1" viewBox="0 0 357.5 248" xmlns="http://www.w3.org/2000/svg">
<defs>
</defs>
<path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
</svg>
</div>
Is it possible to detach SVG from the viewBox and adapt to parent dimension?
The viewBox is the way you get an SVG to adapt to a parent's dimensions. What I think you are asking is whether it is possible to get a viewBox to stretch to fill a parent container.
The answer is yes. You can do that using preserveAspectRatio="none". But note that this stretches the scale of the shape. So curves in the shape will be distorted. See below.
Is it possible to detach SVG stroke width and always be as defined? (4px)
Yes. You can set vector-effect: non-scaling-stroke on the path elements. See below.
.c500x200 {
width: 500px;
height: 200px;
background-color: linen;
}
.c200x600 {
width: 200px;
height: 600px;
background-color: linen;
}
svg {
width: 100%;
height: 100%;
}
svg path {
stroke-width: 4px;
stroke: #d22f2c;
fill: none;
vector-effect: non-scaling-stroke;
}
<div class='c500x200'>
<svg data-name="Layer 1" viewBox="0 0 357.5 248" preserveAspectRatio="none">
<defs>
</defs>
<path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
</svg>
</div>
<div class='c200x600'>
<svg data-name="Layer 1" viewBox="0 0 357.5 248" preserveAspectRatio="none">
<defs>
</defs>
<path transform="translate(-289 -320)" d="M623,565.5H291.5v-243h341v231s-1,12,14,12"/>
</svg>
</div>
I have an SVG that is essentially a box with rounded edges and borders on the corners of each edge:
<div class="container">
</div>
<svg width="258" height="258" viewBox="0 0 258 258" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M257 211.489L257 245C257 251.627 251.627 257 245 257L211.489 257" stroke="white" stroke-width="2" />
<path d="M211.489 0.999998L245 0.999999C251.627 1 257 6.37258 257 13L257 46.5111" stroke="white" stroke-width="2" />
<path d="M46.5111 257L13 257C6.37258 257 1 251.627 1 245L1.00001 211.489" stroke="white" stroke-width="2" />
<path d="M1 46.5111V13C1 6.37258 6.37258 1 13 1H46.5111" stroke="white" stroke-width="2" />
</svg>
It's placed over a container div with a colored background:
body{background: white}
.container {
margin-top: 70px;
height: 400px;
margin: 0 auto;
background-color: black;
opacity: 0.55;
}
svg {
position: absolute;
top: 50px;
left: 300px;
}
I want the center of the SVG (the entire center area within the white edged borders) to be transparent. So in this example you would see the white background of the body.
Here's a CodePen of it: https://codepen.io/lance-p/pen/mdrwyyN
I was told that I could use a mask to achieve this but havent been able to get it to work. Any suggestions (with or without a mask) would be appreciated!
This is an alternative solution where I'm using a very wide shadow instead of the .container background.
Also I've simplified the svg but you can keep your code here.
*{margin:0;padding:0}
body {
background: white;
}
.container {
margin-top: 70px;
height: 400px;
margin: 0 auto;
overflow: hidden;
opacity: 0.55;
}
#hole {/*I want the hole to be slightly smaller than the svg element hence the calc*/
width:calc(258px - 8px);
height:calc(258px - 8px);
border-radius:20px;
position: relative;
top: calc(50px + 4px);
left: calc(300px + 4px);
background:transparent;
box-shadow:0 0 0 200vmax #000;
}
svg{
width:258px;
height:258px;
position: absolute;
top: 50px;
left: 300px;
}
<div class="container">
<div id="hole"></div>
</div>
<svg width="258" height="258" viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="256" height="256" rx="20" id="r" stroke="white" stroke-width="2" stroke-dasharray="80 168" stroke-dashoffset="58" fill="none" />
</svg>
#alexandr_TT is commenting:
Can somehow highlight in the description the main solution for positioning the white corners stroke-dasharray="80 168" stroke-dashoffset="58"
First you need to know the total length of the rect with rounded corners. let l = r.getTotalLength();. You divide this value by 4 to know the total of a stroke and a gap: let stroke_gap = l/4; Next you choose one value for the stroke, for example let stroke = 80. For the gap you'll use let gap = stroke_gap - stroke; I've rounded the numbers. Maybe I shouldn't. This is giving me something like stroke-dasharray="80 168" If you are using only this the first stroke will begin at a distance of 20 units (rx = "20") from the corner (x="1" y="1") You will need a stroke-dashoffset to offset the strokes and make them bent around the corners.
You can calculate the lenght of the corner part of the path: It's the length of 1/4 of the perimeter of a circle with radius = 20 (rx=20): let corner = 2 * Math.PI * radius/4; The value for the stroke-dashoffset should be let sdo = stroke/2 + corner/2
let l = r.getTotalLength();
let radius = 20;
let stroke_gap = l/4;
let stroke = 80;
let gap = stroke_gap - stroke;
let corner = 2 * Math.PI * radius/4;
let sdo = stroke/2 + corner/2;
r.setAttribute("stroke-dasharray",`${stroke} ${gap}`)
r.setAttribute("stroke-dashoffset",sdo)
<svg viewBox="0 0 258 258" xmlns="http://www.w3.org/2000/svg">
<rect x="1" y="1" width="256" height="256" rx="20" stroke="gold" stroke-width="5" fill="none" />
<rect x="1" y="1" width="256" height="256" rx="20" id="r" stroke="black" stroke-width="2" fill="none" />
<path d="M1,21A20 20 0 0 1 21,1" stroke="red" fill="none" id="corner" />
</svg>
I need to create a set of 3 triangles that each have content in them (images, copy, etc).
I have setup this Pen to show roughly what I'm trying to achieve: https://codepen.io/andystent/pen/OJyNdmB
And here is an image for quick reference:
In this example the "Top" and "Left" triangles are IMAGES with the clip-path applied and displaying perfectly.
The "Right" triangle (with the red background) is a DIV with the clip-path applied but the proportions are wrong.
It should look like a mirrored version of the "Left" triangle.
When I apply it to an image it is perfect but when I apply to the div it is not. What is the best way to do this?
I am new to SVG so it is extremely likely that I am not doing this correctly. I have looked at numerous posts and the method I have tried is from a few of those but without success... so now I'm reaching out to you geniuses...
Here's the HTML and CSS for the red "Right" triangle with the clip applied to the DIV in the CSS:
#right-wrapper {
position: absolute;
width: 50%;
height: 100%;
right: 0;
padding: 40px 20px;
box-sizing: border-box;
}
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
right: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
display: flex;
justify-content: center;
align-items: center;
}
<div id="right-wrapper">
<svg width="100%" height="100%" viewBox="0 0 1220 1214" preserveAspectRatio="none">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
<!-- <image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" /> -->
</svg>
</div>
----- UPDATE: -----
As suggested in the comments, I have created a simplified Pen that gets to the heart of what I'm trying to achieve and the embedded HTML and CSS is below.
Essentially I am trying to get the red <div> to be clipped exactly like the <image>.
https://codepen.io/andystent/pen/RwWRjLd
#right-content-div {
background-color: red;
height: 100%;
width: 100%;
position: absolute;
top: 0;
clip-path: url(#clip-path-right);
-webkit-clip-path: url(#clip-path-right);
}
<svg width="20%" height="20%" viewBox="0 0 1220 1214">
<defs>
<clipPath id="clip-path-right">
<path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" id="path-1">
</path>
</clipPath>
</defs>
<image clip-path="url(#clip-path-right)" height="100%" width="100%" preserveAspectRatio="none" xlink:href="https://www.w3schools.com/css/klematis_big.jpg" />
</svg>
<div id="right-content-div" preserveAspectRatio="none">
<h1>test heading</h1>
</div>
Here is an idea where I will be using mask instead of clip-path. The main trick to correctly set the viewBox (you already have it in your code) add preserveAspectRatio="none" then have a mask size of 100% 100%
.box {
width:200px;
height:200px;
display:inline-block;
background:red;
}
.mask {
-webkit-mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
mask:url('data:image/svg+xml;utf8,<svg preserveAspectRatio="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1220 1214"> <path d="M1232,1212.58943 L1232,4.82844551 C1232,3.17159126 1230.65685,1.82844551 1229,1.82844551 C1228.53907,1.82844551 1228.08435,1.93465364 1227.67111,2.13882722 L18.145562,599.743544 C13.1941115,602.189966 11.1633848,608.187127 13.6098071,613.138577 C14.582638,615.107544 16.1765951,616.701501 18.145562,617.674332 L1227.67111,1215.27905 C1229.15654,1216.01298 1230.95569,1215.40376 1231.68962,1213.91832 C1231.89379,1213.50508 1232,1213.05036 1232,1212.58943 Z" /> </svg>') 0 0/100% 100%;
}
<div class="box mask"></div>
<div class="box mask" style="width:300px;"></div>
<div class="box mask" style="height:300px;"></div>
<img src="https://i.picsum.photos/id/1074/200/200.jpg" class="mask">
I have an image inside of an SVG element with a clipPath.
I want the clip path to behave like it is in my codePen https://codepen.io/celli/pen/rNBvmyx with preserveAspectRatio="none" so that I always get the same height for my clipPath which matches the parent and stretch from edge to edge of my browser.
The issue is that I want my image to preserve it's aspect-ratio and not appear squashed, while maintaining that the mask is the only element that is being squeezed and not preserving it's aspect ratio.
I tried adding css to the image to preserve the aspect ratio, but it seems to follow the SVGs preserveAspectRatio="none", but I only want that to apply to my clipPath part of the SVG.
<div id="containerId">
<svg class="svg-graphic" preserveAspectRatio="none" viewBox="0 0 1920 1080" xmlns="http://www.w3.org/2000/svg" xlink="http://www.w3.org/1999/xlink" version="1.1" width="100%" height="auto">
<g>
<clipPath id="svgmask">
<polygon points="0,0 0,650 1920,1045 1920,394 "/>
</clipPath>
</g>
<image clip-path="url(#svgmask)" style="width:100%; height:auto; max-width:100%;" xlink:href="https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg" />
</a>
</svg>
</div>
A solution to your problem would be clipping a div with the image as a background. In this case you use a path instead of a polygon where the coords values are from 0 to 1 and clipPathUnits="objectBoundingBox". This won't work on IE and on Edge: https://caniuse.com/#feat=css-clip-path
*{margin:0;
padding:0;}
#containerId {
width: 100%;
height: 800px;
background-color: green;
}
#media (max-width: 800px) {
#containerId {
width: 100%;
height: 500px;
background: orange;
}
}
.img {
width: 100%;
height: 100%;
background-image: url("https://img-fotki.yandex.ru/get/5607/5091629.6b/0_612e6_b9039c0d_M.jpg");
background-size: cover;
-webkit-clip-path: url(#svgmask);
clip-path: url(#svgmask);
}
<svg height="0" width="0" style="position:absolute;">
<defs>
<clipPath id="svgmask" clipPathUnits="objectBoundingBox">
<path d="M0,0 L0,0.6 1,1 1,0.4"/>
</clipPath>
</defs>
</svg>
<div id="containerId">
<div class="img"></div>
</div>
I found an alternative way to do it that works in IE, without SVG, in-case anyone is interested: https://codepen.io/celli/pen/KKPReKE I wanted to use SVG, but this way seems to be the best solution by using a pseudo element and a rotated div.
<div id="head">
<div id="headAddBkgColor"></div>
</div>
<div id="slantElm"></div>
I've been trying to get a inline svg clipping path to work but can't quite figure out why it isn't.
The first div in the snippet is the one that isn't working (#myClip)
The second is what it should look like.
The third div is all the same code but with a different path that does work.
So what's wrong with my first one? Any help is greatly appreciated.
#myDiv {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
/* Div with a different clipping path that I don't want */
#myDiv-two {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClipTwo);
clip-path: url(#myClipTwo);
}
<h2>Div with clip path that's not working</h2>
<div id="myDiv">
<svg width="0" height="0">
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z"/>
</clipPath>
</svg>
</div>
<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>
<h2>Div with different clipping path</h2>
<div id="myDiv-two">
<svg width="0" height="0">
<clipPath id="myClipTwo" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.9 C 1,0.9, 0.77,1, 0.5,1 0.23,1, 0,0.9,0,0.9z"/>
</clipPath>
</svg>
</div>
You have defined your clipping path to be clipPathUnits="objectBoundingBox". When you do that, the coordinates need to be between 0 and 1. (0,0) represents the top left of the element the clip is being applied to. And (1,1) represents the bottom right.
However your coordinates are much bigger than that. For example your initial line (M0,0V678.48) is from (0,0) to (0,678.48).
I would love an explanation as to why the coordinates need to be between 0 and 1 but I have made an SVG by hand instead of exporting from illustrator that is fairly close to my original using coordinates between 0 and 1 so it will work.
#myDiv {
background: Red;
min-height: 400px;
-webkit-clip-path: url(#myClip);
clip-path: url(#myClip);
}
<h2>New Clip path</h2>
<div id="myDiv">
<svg width="0" height="0">
<clipPath id="myClip" clipPathUnits="objectBoundingBox">
<path d="M0,0 1,0 1,0.86 C 1.1,.85, 0.9,1, 0.7,1 0.4,1, 0.3,0.8,0,1z"/>
</clipPath>
</svg>
</div>
<h2>Original SVG</h2>
<svg id="Layer_2" data-name="Layer 2" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1440 690.45"><defs></defs><path d="M0,0V678.48s138.59-46.14,279.3-48.31,256.56,4.64,326.86,13.44S941.94,700.69,1115,688.48s205.35-15.91,325-40.13V0Z" fill="#F34862"/></svg>