svg to clip path
need help converting an svg into clip path:
this is the svg:
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" width="428.000000pt" height="1298.000000pt" viewBox="0 0 428.000000 1298.000000" preserveAspectRatio="xMidYMid meet">
<g transform="translate(0.000000,1298.000000) scale(0.100000,-0.100000)" fill="#000000" stroke="none">
<path d="M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z"/>
</g>
</svg>
2 Replies
You can just copy the code into the path:
The only issue is the path won't size dynamically.
I am not aware of any way to scale the dimensions of the path. You might need to do math on all the coordinates.
clip-path: path("M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z");
clip-path: path("M2505 12960 c-132 -5 -549 -21 -927 -36 l-687 -27 -239 27 c-254 29 -432 35 -501 16 -23 -6 -58 -26 -77 -43 l-35 -32 -5 -2530 c-2 -1391 -9 -3113 -14 -3825 -13 -1655 -13 -4601 0 -5275 14 -772 31 -1049 65 -1102 19 -28 103 -59 201 -73 226 -32 599 -24 1459 31 264 17 583 32 710 32 220 2 240 0 465 -35 394 -62 502 -72 760 -73 197 0 247 3 307 19 82 20 150 61 175 103 44 75 65 461 90 1618 19 851 19 9740 0 10235 -19 526 -39 771 -70 865 -15 45 -21 51 -62 66 -94 35 -203 41 -795 44 -319 2 -688 -1 -820 -5z m1197 -20 c226 -10 389 -29 429 -50 24 -14 36 -61 54 -210 20 -176 33 -448 45 -930 15 -632 17 -8689 2 -9585 -22 -1321 -46 -1874 -85 -1993 -16 -49 -74 -87 -172 -113 -68 -19 -108 -22 -270 -22 -209 0 -357 14 -725 69 -129 19 -282 39 -340 43 -126 10 -400 0 -925 -34 -644 -40 -842 -48 -1124 -42 -413 9 -490 31 -504 142 -14 105 -27 388 -39 840 -15 588 -15 4084 1 5890 6 699 11 2312 11 3585 0 2041 2 2318 15 2337 8 12 36 30 62 40 68 26 259 23 483 -7 208 -28 346 -29 870 -6 1171 51 1797 63 2212 46z");