Convert Svg Path Data To 0-1 Range To Use As Clippath With Objectboundingbox

I'm using a rather complex SVG shape exported from Illustrator as a clipping path. The problem is that objectBoundingBox requires path data to be within the 0-1 range, and my path

Solution 1:

Following the comments from @Robert Longson, just transform the scale of the <clipPath>.

The shape I have taken from Figma for this example is 248 x 239, so I just apply the equivalent scale(1/248, 1/239). This gives:

transform="scale(0.004032258064516, 0.00418410041841)"

This along with clipPathUnits="objectBoundingBox" means that we can use this shape to clip at any size or aspect ratio.

.clipped {
  clip-path: url(#clip-shape);
}


/* make sure the svg doesn't take up any space in the document */

svg {
  width: 0;
  height: 0;
}

p {
  width: 200px;
  color: white;
  background: blue;
}

<!-- Note: SVG width & height have no effect here, but I've left them for reference --><svgwidth="248"height="239"><defs><clipPathid="clip-shape"clipPathUnits="objectBoundingBox"transform="scale(0.0040, 0.0042)"><pathd="M199 30C110 36 2.03409 -46.9894 18 43C29 105 -7.39156 155.325 1.99998 197C18 268 69.8645 202.231 170 237C242 262 288 24 199 30Z" /></clipPath></defs></svg><imgclass="clipped"src="https://picsum.photos/80/80"alt=""><imgclass="clipped"src="https://picsum.photos/300/200"alt=""><imgclass="clipped"src="https://picsum.photos/100/300"alt=""><pclass="clipped">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris ac est eu risus posuere consectetur vitae sed elit. Quisque mollis, nunc pretium porta eleifend, ligula risus mattis magna, vel tristique lacus massa consectetur mi. Ut sed dui diam. Mauris
  ut mi risus.</p>

Solution 2:

With the following php script, you can transform them:

$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";
functionregex_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);

Just set the proper width and height variables based on your boundingbox.

This script can be found in the answer of the following question: How to apply clipPath to a div with the clipPath position being relative to the div position

Solution 3:

I wrote a converter on CodePen as an attempt to solve this problem. It is loosely based on skywlkrs answer, but it supports exponential floats and adds some UI to it:

https://codepen.io/21sieben/full/gQYdEB/

As an example, this will convert

M11.214377,3.55271368e-15 L64,0 L64,64 L11.214377,64 L1.88513642,41.4772208 C-0.628378807,35.4090582 -0.628378807,28.5909418 1.88513642,22.5227792 L11.214377,3.55271368e-15 Z

to

M0.17522,0 L1,0 L1,1 L0.17522,1 L0.02946,0.64808 C-0.00982,0.55327 -0.00982,0.44673 0.02946,0.35192 L0.17522,0 Z

Notice the exponents in some floats (Sketch likes to export those).