2

I recently used a clip-path to do a decorative image cropping. I created a mask in Inkscape and "ripped" it out of the final svg path, and it worked, except that the mask doesn't stretch to the image size, but stays to the view-box size, since the coordinates in the path are absolute.

section {
  width: 320px;
  height: 320px;
  border: 1px solid black;
}

#clipme {
  width: 100%;
  height: 100%;
  background-color: #FF8864;
  clip-path: path('m8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1z');
}
<section>
  <div id='clipme'/>
</section>

Is it possible to fix this at the css level? Maybe there are tools that can convert absolute values to relative values? And since I mentioned inkscape, maybe I can configure it there?

LIMPIX64
  • 201
  • 1
  • 3
  • 12
  • You can also achieve a responsive clip-path using a svg `clipPath` - it' currently not working with css `path()`method. See also [Clip Path SVG file](https://stackoverflow.com/questions/70864383/clip-path-svg-file/70990961#70990961) – herrstrietzel Dec 05 '22 at 21:20

1 Answers1

2

Use it as mask instead. Put the path inside an SVG with the correct viewBox then load it like an image. Resize the section element to see the effect

section {
  width: 320px;
  height: 320px;
  border: 1px solid black;
  overflow: auto;
  resize: both;
}

#clipme {
  width: 100%;
  height: 100%;
  background-color: #FF8864;
  -webkit-mask:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" version="1.1" viewBox="0 0 130 130"><path d="M8.3634 9.8309c68.284-6.1882 39.013 12.331 80.804-1.0687 6.0561-1.9419 18.525 0.77696 32.616 1.0687-19.889 102.68 18.582 69.02 0 110.1-42.039-3.5946-82.783-33.22-113.42 0-27.365-85.399 32.654-92.947 0-110.1zz"></path></svg>' ) center/contain no-repeat
}
<section>
  <div id='clipme'></div>
</section>
Temani Afif
  • 245,468
  • 26
  • 309
  • 415