Ukuba ufuna ukusika umfanekiso usebenzisa i-SVG, kuyacetyiswa ukuba usebenzise ipropathi yeCSS ethi `clip-path` . Le script ilandelayo isusa imiqobo eliqela: Ii-SVG zingagcinwa kusetyenziswa i-Illustrator, ungacacisa i-URL (ehambelanayo okanye egqibeleleyo) ye-SVG (i-Chrome okwangoku ixhasa ii-SVG ezikwi-inline kuphela), kwaye i-cutout nayo iyaphendula ngokupheleleyo.
Kuqala wenza imaski yokunqunyulwa kwiAdobe Illustrator kwaye uthumele ngaphandle i-SVG ngezi zicwangciso zilandelayo:
Umlinganiselo we-aspect we-SVG kunye nomfanekiso kufuneka ufane. Okokugqibela, i-SVG yangaphandle ibhekiselwa kumfanekiso, umzekelo, kwi-attribute ethi `data-clip` .:
1e4823ee95525ce0e04bb693c48e0e35
Ngoku udibanisa le script ilandelayo:
1e4823ee95525ce0e04bb693c48e0e35
Isiphumo kukuba:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.