Inā makemake ʻoe e ʻoki i kahi kiʻi me ke kōkua o kahi SVG, paipai ʻia ka hoʻohana ʻana o ka CSS clip-path . ʻO nā script aʻe e hoʻonāukiuki i nā pale ākea: hiki ke mālama ʻia ka SVG me ke kōkua o Illustrator, hiki iā ʻoe ke kuhikuhi i ka (pili a i ʻole) URL o kahi SVG ( Kākoʻo ʻo Chrome a hiki i kēia manawa maoli SVG wale nō) a ʻo ka neckline pū kekahi me ka pane piha.
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ā hiʻohiʻona o ka SVG a me ke kiʻi. ʻO ka mea hope loa, e kuhikuhi ʻia ka SVG kūwaho i ke kiʻi, no ka laʻana ma ka hiʻona ʻike kiʻi-ʻikepili:
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.