Клип жолу бар сүрөттөрдөн SVGлерди кесип салыңыз

Эгерде сиз SVG жардамы менен сүрөттү кесип салгыңыз келсе, CSS мулк клип-жолун колдонуу сунушталат. Төмөнкү скрипт Триггерлерди тоскоолдуктарды көөп: SVG Illustrator жардамы менен аман болот, сен учун SVG боюнча (тиешелүү же абсолюттуу) URL (Chrome көрсөтүүгө болот колдойт азыр тилинде чет гана киргизилген SVG чейин) жана neckline да толугу менен жооп берет.


Алгач сиз Adobe Illustratorдо кыркуу маскасын түзүп, SVGди төмөнкү жөндөөлөр менен экспорттойсуз:

SVG менен сүрөттүн пропорциялары бирдей болушу керек. Акыр-аягы, тышкы SVG сүрөттө шилтеме кылынат, мисалы, маалымат-клип атрибутунда:

1e4823ee95525ce0e04bb693c48e0e35

Эми сиз төмөнкү скриптти бириктиресиз:

1e4823ee95525ce0e04bb693c48e0e35

Жыйынтыгы ушундай:

See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.

Артка