How to Apply Clippath to a Div with the Clippath Position Being Relative to the Div Position

How to apply clipPath to a div with the clipPath position being relative to the div position

Thanks to Robert's comment, I was able to solve the issue I had.

Here is a PHP snippet I used to convert the absolute path to relative, so that the values are between 0 and 1.

$absolute_path = "M46.9819755,61.8637972 C42.0075109,66.8848566 35.0759468,70 27.4091794,70 C12.2715076,70 0,57.8557238 0,42.875 C0,32.9452436 5.3914988,24.2616832 13.4354963,19.534921 C14.8172134,8.52285244 24.3072531,0 35.8087666,0 C43.9305035,0 51.0492374,4.2498423 55.01819,10.6250065 C58.2376107,8.87215568 61.9363599,7.875 65.8704472,7.875 C78.322403,7.875 88.4167076,17.8646465 88.4167076,30.1875 C88.4167076,32.1602271 88.1580127,34.0731592 87.6723639,35.8948845 L87.6723639,35.8948845 C93.3534903,38.685457 97.2583784,44.4851888 97.2583784,51.1875 C97.2583784,60.6108585 89.5392042,68.25 80.0171204,68.25 C75.4841931,68.25 71.3598367,66.5188366 68.2822969,63.6881381 C65.5613034,65.4654463 62.3012892,66.5 58.7971106,66.5 C54.2246352,66.5 50.0678912,64.7384974 46.9819755,61.8637972 Z";
function regex_callback($matches) {
    static $count = -1;
    $count++;
    $width = 98;
    $height = 70;
    if($count % 2) {
        return $matches[0] / $height;
    } else {
        return $matches[0] / $width;
    }
}

$relative_path = preg_replace_callback('(\d+(\.\d+)?)', 'regex_callback', $absolute_path);

Since the clipping path is not rectangular, I couldn't divide the values with one number, but had to use the width and the height of the clipping path itself.

.clippedElement {

  width: 98px;

  height: 70px;

  position: absolute;

  left: 10px;

  top: 0;

  background-color: lightblue;

  -webkit-clip-path: url(#cloudClip);

  -moz-clip-path: url(#cloudClip);

  clip-path: url(#cloudClip);

}

<svg width="98" height="70">

<defs>

    <clipPath id="cloudClip" clipPathUnits="objectBoundingBox">

        <path d="M0.47940791326531,0.88376853142857 C0.42864807040816,0.95549795142857 0.3579178244898,1 0.27968550408163,1 C0.12521946530612,1 0,0.82651034 0,0.6125 C0,0.47064633714286 0.055015293877551,0.34659547428571 0.13709690102041,0.2790703 C0.15119605510204,0.12175503485714 0.24803319489796,0 0.36539557755102,0 C0.44827044387755,0 0.52091058571429,0.060712032857143 0.56141010204082,0.15178580714286 C0.59426133367347,0.12674508114286 0.63200367244898,0.1125 0.67214742040816,0.1125 C0.79920819387755,0.1125 0.90221130204082,0.25520923571429 0.90221130204082,0.43125 C0.90221130204082,0.45943181571429 0.89957155816327,0.48675941714286 0.89461595816327,0.51278406428571 L0.89461595816327,0.51278406428571 C0.95258663571429,0.55264938571429 0.99243243265306,0.63550269714286 0.99243243265306,0.73125 C0.99243243265306,0.86586940714286 0.91366534897959,0.975 0.81650122857143,0.975 C0.77024686836735,0.975 0.72816159897959,0.95026909428571 0.69675813163265,0.90983054428571 C0.66899289183673,0.93522066142857 0.63572744081633,0.95 0.59997051632653,0.95 C0.55331260408163,0.95 0.51089684897959,0.92483567714286 0.47940791326531,0.88376853142857 Z"></path>

    </clipPath>

</defs>

</svg>

<div class="clippedElement"></div>

Clip-path with an element that comes out of div

As I commented above here is an alternative to create the background without the use of clip-path which is also better supported and easier to manage:

.slide {
  --s: 40px; /* Change this to control the angle*/

   height: 300px;
   background:
    linear-gradient(to top left ,purple 50%,#0000 51%) top,
    linear-gradient(purple 0 0) center,
    linear-gradient(to bottom right ,purple 50%,#0000 51%) bottom;
   background-size: 100% var(--s),100% calc(100% - 2*var(--s)); 
   background-repeat: no-repeat;
}

<div class="slide">
</div>

Elements with position: relative with SVG clip paths not displaying in Safari

Try using -webkit-transform:translateZ(1px) on the clipped element. If it's not showing on mobile, you may need to include the other prefixes as well. Demo

It forces hardware acceleration (essentially the browser pays more attention to rendering it) by putting it on the GPU.

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

How to make CSS clip path only reside on top of div?

If you can't find another solution, it might work.

body {

  margin: 0 auto;

  background:tomato;

}

.container {

  width: 320px;

  height: 600px;

  position:relative;

}

.rectangle {

  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);

  width: 320px;

  height: 600px;

  clip-path: url(#path);

  position:absolute;

  top:0;

  left:0;

  z-index:2;

}

.linear {

  background-image: linear-gradient(-197deg, #E1DFFA 0%, #E1E0FA 34%, #EDFCFE 86%, #EDFCFE 86%);

  width: 320px;

  height: 488px;

  position:absolute;

  left:0;

  z-index:-2;

  bottom:0;

}

<svg width="321px" height="112px" viewBox="0 0 321 112" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">

<clipPath id="path">

    <path d="M0,54.6239019 C32.8368888,93.6621872 61.3541089,112.45422 85.5516602,111 C151.463201,111.161716 173.963962,18.2383058 321,0 C321.133852,37.3108666 321.133852,74.6442 321,112 L0,112 L0,54.6239019 Z" id="Rectangle" fill="#000000"></path>

    </clipPath>

</svg>

<div class="container">

<div class="rectangle">

</div>

<div class="linear">

</div>

</div>

How to apply SVG clipPath to HTML element that is not in the top left corner of document in webkit browsers

I think PaulOB's responses over at SitePoint wraps this issue up pretty nicely. Long story short: support for applying an SVG clipPath to an HTML element is not quite there for webkit browsers yet.

---

Related Topics