Якщо ви хочете вирізати зображення за допомогою 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.