Если вы хотите вырезать изображение из 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.