Если вы хотите вырезать изображение с помощью SVG, рекомендуется использовать свойство CSS clip-path . Следующий скрипт запускает неровные препятствия: SVG можно сохранить с помощью Illustrator, вы можете указать (относительный или абсолютный) URL-адрес SVG (Chrome до сих пор поддерживает только встроенный SVG), а вырез также полностью адаптивен.
Сначала вы создаете обтравочную маску в Adobe Illustrator и экспортируете SVG со следующими настройками:
Соотношения сторон SVG и изображения должны быть одинаковыми. Наконец, внешний SVG упоминается в изображении, например, в атрибуте data-clip.:
1e4823ee95525ce0e04bb693c48e0e35
Теперь вы интегрируете следующий скрипт:
1e4823ee95525ce0e04bb693c48e0e35
В результате:
See the Pen clip-path and SVGs by David Vielhuber (@vielhuber) on CodePen.