Эгер сиз SVG колдонуп сүрөттү кесип алгыңыз келсе, CSSтин `clip-path` касиетин колдонуу сунушталат. Төмөнкү скрипт бир нече тоскоолдуктарды жок кылат: SVG файлдарын Illustrator аркылуу сактоого болот, сиз SVG файлынын (салыштырмалуу же абсолюттук) URL дарегин көрсөтө аласыз (Chrome учурда түз SVG файлдарын гана колдойт ) жана кесилген жер да толугу менен жооп берет.
Алгач сиз Adobe Illustratorдо кыркуу маскасын түзүп, SVGди төмөнкү жөндөөлөр менен экспорттойсуз:
SVG менен сүрөттүн аспектилеринин катышы бирдей болушу керек. Акырында, тышкы SVG сүрөттө, мисалы, `data-clip` атрибутунда шилтеме кылынат.:
1e4823ee95525ce0e04bb693c48e0e35
Эми сиз төмөнкү скриптти бириктиресиз:
1e4823ee95525ce0e04bb693c48e0e35
Жыйынтыгы ушундай:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.