Inā makemake ʻoe e ʻoki i kahi kiʻi me ka hoʻohana ʻana i kahi SVG, ua ʻōlelo ʻia e hoʻohana i ka waiwai CSS `clip-path` . Hoʻopau kēia script i kekahi mau mea keakea: Hiki ke mālama ʻia nā SVG me ka hoʻohana ʻana iā Illustrator, hiki iā ʻoe ke kuhikuhi i ka URL (pili a paʻa paha) o kahi SVG ( kākoʻo wale ʻo Chrome i nā SVG inline i kēia manawa), a pane piha hoʻi ka ʻoki.
Hana mua ʻoe i kahi mask mask ma Adobe Illustrator a hoʻokuʻu aku i ka SVG me nā hoʻonohonoho aʻe:
Pono e like nā lakio hiʻohiʻona o ka SVG a me ke kiʻi. ʻO ka hope loa, ua kuhikuhi ʻia ka SVG waho i loko o ke kiʻi, no ka laʻana, ma ka hiʻohiʻona `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
I kēia manawa hoʻohui ʻoe i kēia script:
1e4823ee95525ce0e04bb693c48e0e35
ʻO ka hopena kēlā:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.