CODEWITHSUNDEEP
csssvgclip-path
Rob Monhemius
Rob Monhemius

Reputation: 5144

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

On MDN there is an example on how to use a clip-path svg on an image. The same clip-path does not seem to apply on a div element. Can someone clarify:

Example code (based on MDN docs) clipping an image

#clipped {
  clip-path: url(#cross);
}
<img id="clipped" src="https://mdn.mozillademos.org/files/12668/MDN.svg"
    alt="MDN logo">
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

The same clip-path on a div (which does not seem to work)

#clipped {
  width: 100px;
  height: 100px;
  background: black;
  clip-path: url(#cross);
}
<div id="clipped"></div>
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

Upvotes: 4

Views: 2320

Answers (3)

enxaneta
enxaneta

Reputation: 33034

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>

Upvotes: 3

Temani Afif
Temani Afif

Reputation: 272789

As pointed by @enxaneta it's all a matter of size. If you increase the size of div you will see the effect:

#clipped {
  width: 300px;
  height: 200px;
  background: black;
  clip-path: url(#cross);
}
<div id="clipped"></div>
<svg height="0" width="0">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs>
</svg>

Or you can use mask to have something dynamic. The trick to have 4 white rectangle on each corner and white color mean make it visible

.box {
  width: 100px;
  height: 100px;
  margin:5px;
  background: linear-gradient(red,blue);
  -webkit-mask:
    linear-gradient(white,white) top left,
    linear-gradient(white,white) top right,
    linear-gradient(white,white) bottom left,
    linear-gradient(white,white) bottom right;
  -webkit-mask-size:40% 40%;
  -webkit-mask-repeat:no-repeat;
  -mask:
    linear-gradient(white,white) top left,
    linear-gradient(white,white) top right,
    linear-gradient(white,white) bottom left,
    linear-gradient(white,white) bottom right;
  mask-size:40% 40%;
  mask-repeat:no-repeat;
}
<div class="box"></div>

<div class="box" style="width:200px;height:200px;"></div>

Upvotes: 3

Alexandr_TT
Alexandr_TT

Reputation: 14545

Clip-path is not inherited. Establishing a new clipping path: the ‘clipPath’ element W3C

Therefore, we will not get the child element cut by applying the clip-path to the parent block

It might be better to use the svg <image> tag instead of <img> and apply clip-path to it

Use div as adaptive container 

.wrapped {
width:25%;
height:25%;
}
#img1 {
clip-path:url(#cross);
}
<div class="wrapped">
<svg  viewBox="0 0 250 250">
  <defs>
    <clipPath id="cross">
      <rect y="110" x="137" width="90" height="90"/>
      <rect x="0" y="110" width="90" height="90"/>
      <rect x="137" y="0" width="90" height="90"/>
      <rect x="0" y="0" width="90" height="90"/>
    </clipPath>
  </defs> 

<image id="img1" width="100%" height="100%" xlink:href="https://upload.wikimedia.org/wikipedia/commons/0/02/SVG_logo.svg"/>

</svg> 

</div>

Upvotes: 1

Related Questions