Clip Div with Svg Path

Clip div with SVG path

You can use the SVG command clipPath

<clipPath id="svgPath" >
            <path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/> 
      </clipPath>

<style>.banner_1 {  min-height: 200px;  background-color: #41dddb;}.banner_2 {  min-height: 200px;  background-color: #ddc141;  margin-top: -100px;}</style><div class="banner_1"></div>
<div class="banner_2">    <svg viewBox="0 0 500 500" preserveAspectRatio="xMinYMin meet">  <defs> <clipPath id="svgPath" > <path d="M0,20 C100,80 350,0 500,30 L500,00 L0,0 Z" style="stroke: none; fill:red;"/>   </clipPath> </defs>  <rect width="100%" height="100%" fill="#41dddb"  clip-path="url(#svgPath)"  />            </svg></div>

How to apply SVG clipPath with CSS to one edge of div?

Use it as mask and define its width to be 100% and an auto height

.box {
  height: 200px; /* this can be any height and it won't affect the curvature */
  -webkit-mask:
    url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 1 1"><path d="M0 0.00880688C0 0.00880688 0.101517 -0.0152445 0.276014 0.0161458C0.474915 0.0519263 0.605365 0.0594333 0.727565 0.0493416C0.83584 0.0403992 1 0.0124763 1 0.0124763V1H0V0.00880688Z" fill="black"/></svg>') 
    top/100% auto no-repeat;
  background:red;
}

<div class="box"></div>

Animated div with SVG clip-path not responsive?

Part of the problem are your width and max-width definitions.

Essentially you have to ensure your clipped image keeps its aspect ratio.

You might actually use the css aspect-ratio property – but browser support is still not perfect. Thus we take the old-school aspect-ratio hack.

   .imageHero::before {
        content: "";
        padding-bottom: 100%;
        width: 100%;
        display: block;
    }

.imageHero {
  max-width: 65vh;
  margin: 0 auto;
  clip-path: url('#my-clip-path');
  animation: clipRotateAnim 6s linear infinite;
  position: relative;
  overflow: hidden;
}

/* force aspect ratio 1:1 */
.imageHero::before {
  content: "";
  padding-bottom: 100%;
  width: 100%;
  display: block;
}

/* image */
.imageHero::after {
  content: "";
  position: absolute;
  top: -10%;
  bottom: -10%;
  left: -10%;
  right: -10%;
  background: var(--i) center;
  background-size: cover;
  animation: inherit;
  animation-direction: reverse;
}

@keyframes clipRotateAnim {
  to {
    transform: rotate(360deg);
  }
}

.imageHero-wrp {
  position: relative;
  overflow: hidden;
  padding: 40px;
  background: #eee;
}

.svg-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 0;
  height: 0;
}

<main>
  <div class="imageHero-wrp">
    <div class="imageHero" style="--i:url(https://source.unsplash.com/600x600?summer)" width="100%" height="100%">
    </div>

    <svg class="svg-content" viewBox="0 0 1 1">
                <clipPath id="my-clip-path" clipPathUnits="objectBoundingBox">
                    <path
                        d="M0.5,0.768 L0.366,1 L0.366,0.732,0.134,0.866 L0.268,0.634 L0,0.634 L0.232,0.5,0,0.366 L0.268,0.366,0.134,0.134 L0.366,0.268 L0.366,0 L0.5,0.232,0.634,0 L0.634,0.268,0.866,0.134 L0.732,0.366 L1,0.366 L0.768,0.5 L1,0.634,0.732,0.634,0.866,0.866 L0.634,0.732 L0.634,1z">
                    </path>
                </clipPath>
            </svg>
  </div>
</main>

SVG ClipPath: Why does applying the clip path to a DIV have different results to an IMAGE?

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"> 

clip-path svg works on image, but not on div

A solution to your problem would be using clipPathUnits="objectBoundingBox" and build the clipping path with sizes between 0 and 1 like so:

#clipped {  margin:1em;  width: 100px;  height: 100px;  background: black;  display:inline-block;  clip-path: url(#cross);}#clipped.big{  width: 200px;  height: 200px;}

<div id="clipped"></div><div id="clipped" class="big"></div><svg viewBox="0 0 1 1">      <clipPath id="cross" clipPathUnits="objectBoundingBox">       <rect y="0" x="0" width=".4" height=".4"/>       <rect y="0.6" x="0" width=".4" height=".4"/>       <rect y="0" x="0.6" width=".4" height=".4"/>       <rect y="0.6" x="0.6" width=".4" height=".4"/>    </clipPath>  </svg>

Is it possible to clip a HTML element using an SVG image file as the source?

Yes, you can do this by giving the HTML element either a mask property that references a <mask> element in your SVG file or a clip-path property that references a <clipPath> element in your SVG file.

.element {
    /* just because of your example: */
    background-image: url(forest-road.jpg);
    /* use one of these two: */
    clip-path: url(spirograph.svg#myClipPath);
    mask: url(spirograph.svg#myMask);
}

<svg ...>
   <!-- use one of these two: -->
   <clipPath id="myClipPath">
       <!-- shapes, etc., go here -->
   </clipPath>
   <mask id="myMask">
       <!-- shapes, etc., go here -->
   </mask>
</svg>

The two CSS features work slightly differently, with masking being newer and more flexible but having some residual gaps in browser support (including needing prefixes). Either way, you'll need to adjust your SVG to be suitable. A <mask> should make a pixel white for opaque and black for transparent, with greys being intermediate opacities. On the other hand, a <clipPath> defines the region that is visible as the union of a series of shapes.

---

Related Topics