CSS і SVG маски
Розбираючись з можливостями оформлення SVG, зацікавилася темою масок.
Все почалося ось з цього експерименту:
Для написи підключений гуглошріфт, заливка зроблена патерном з градієнтами, при цьому напис не перестала бути текстом - її можна виділити і скопіювати!
Тут слід зазначити, що набагато простіше було б в якості заливки використовувати просто градієнт, що не загортаючи його в патерн, але для цього потрібно було поставити градієнту властивість spreadMethod = "repeat". щоб він повторювався, а в Firefox в цьому випадку градієнт чомусь ламався.
Я подивилася на підтримку цього демо в різних браузерах, згадала про -webkit-background-clip: text. який підтримується тільки в вебкітах, і вирішила подивитися що ще є цікавого в цьому напрямку.
Є кілька способів обрізати елемент по масці. Одні підтримуються всіма сучасними браузерами, інші підтримуються дуже погано, і користуватися ними ще можна. У деяких способах маскою може бути текст.
- CSS - маска створюється в CSS і застосовується до HTML-елементів;
- SVG + CSS - SVG-маска застосовується до HTML-елементів за допомогою CSS;
- SVG - SVG-маска застосовується до SVG-елементам. За допомогою CSS, але головне тут те, що і маска, і маскується елемент є SVG.
Краща підтримка браузерами - у масок, зроблених повністю на SVG.
Всі способи в ньому представлені як є - без фоллбеков, так що ви можете відкрити сторінку в сюжеті браузері і подивитися як в ньому підтримується потрібний вам спосіб. Маю велику надію, що одного разу ми побачимо все маски працюють у всіх сучасних браузерах.
Маски бувають різних типів: одні дозволяють обрізати елемент по векторної фігурі (шляху) - clip. clip-path. інші орієнтуються на яскравість кольорів або альфа-канал зображення - mask і mask-image - ці способи дозволяють отримати маску з розмитими краями. Використовувати текст в якості маски можна в SVG clip-path. SVG mask. -webkit-background-clip і SVG fill. Останнє не є маскою в прямому сенсі слова, але результат виглядає як -webkit-background-clip. і при цьому підтримується всіма сучасними браузерами.
Всі маски ви можете знайти на демо-сторінці. я ж розповім лише про самі добре підтримувані - звичайно ж, всі вони на SVG. Всі приклади в пості - живі демо, що не скріншоти.
Nam tristique vestibulum nulla nec accumsan. Nullam commodo eget dolor et ultricies. Nulla ligula elit, placerat a sapien vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget Maecenas tempus elit quis sapien tempus, sit amet viverra neque mattis. Quisque a tincidunt mi. Proin at justo eu ipsum posuere dignissim vel quis eros. Etiam at libero commodo, varius justo quis, interdum erat. Fusce viverra mollis est, nec euismod ante mattis ut. Aenean eu mauris viverra enim vulputate bibendum. Integer velit metus, cursus et commodo sit amet, gravida vitae purus. Sed scelerisque at odio non condimentum. Sed neque lacus, rhoncus vitae sem ut, pharetra vestibulum elit. Cras ultricies aliquam dolor quis ultrices. Cras eget mauris tincidunt, aliquam erat quis, faucibus augue.
SVG clip-path для SVG елементів
clipPath дозволяє використовувати векторну маску будь-якої форми. Застосування SVG clipPath для HTML-елементів підтримується тільки в Firefox, але якщо перенести розмітку в SVG - маска запрацює в усіх сучасних браузерах.
Фігури всередині clipPath можна комбінувати, щоб отримати більш складні, також в clipPath може використовуватися текст. Текст, який використовується в clipPath. не можна виділити і скопіювати, при цьому текст обрізаного елемента - можна, правда, копіюється він якось дивно.
Nam tristique vestibulum nulla nec accumsan. Nullam commodo eget dolor et ultricies. Nulla ligula elit, placerat a sapien vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget adipiscing magna. Nunc massa justo, placerat at porta at, mollis nec eros. Nullam eu justo erat. Curabitur eget rhoncus purus, interdum posuere ligula. Ut ultricies fermentum dignissim. Aliquam et arcu tempus, euismod nisi eu, lobortis est. Integer ultrices aliquet enim eu ultrices. Nam tristique vestibulum nulla nec accumsan. Nullam commodo eget dolor et ultricies. Nulla ligula elit, placerat a sapien vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictum. Cras eget adipiscing magna. Nunc massa justo, placerat at porta at, mollis nec eros. Nullam eu justo erat. Curabitur eget rhoncus purus, interdum posuere ligula. Ut ultricies fermentum dignissim. Aliquam et arcu tempus, euismod nisi eu, lobortis est. Integer ultrices aliquet enim eu ultrices.
SVG mask для SVG елементів
SVG mask дозволяє задати елемент або поєднання елементів, які будуть працювати маскою по альфа-каналу або за яскравістю. SVG mask для HTML-елементів також підтримується тільки в Firefox, але при перенесенні розмітки в SVG працює всюди.
Маскою можуть служити фігури, при цьому ступінь прозорості залежить від яскравості кольору заливки (світлі кольори - прозорість, темні - непрозорість). Фігури, оголошені нижче в коді, обрізають шари, розташовані вище. Також в якості маски можна використовувати зображення.
SVG mask (на відміну від clipPath) дозволяє зробити маску з розмитими краями.
fill - заливка, а не маска, але дозволяє досить непогано імітувати маски. Заливкою може колір, градієнт або патерн.
Патерн (pattern) - це елемент SVG. У нього можна покласти все що завгодно, щоб потім використовувати вміст контейнера як повторюваний фон. У ньому можна створити візерунок з інших елементів SVG. а також загорнути в нього картинку або текст.
Правда, з текстом є деякі труднощі: в SVG текст не вміє переноситися сам по собі. Щоб зробити текст з переносами, як в звичайному HTML, його потрібно загорнути в foreignObject. але заливка з таким патерном не працює. хоча в спікся для патерну написано, що foreignObject в патерн вставляти можна.
Так що, щоб зробити заливку текстом, треба вставити його через тег text. а кожен рядок загорнути в tspan і задати їй потрібне положення. Спосіб громіздкий, але працює.
Використовуючи в якості паттерна картинки, можна отримати написи з будь-якою текстурою, яку підкаже ваша фантазія. При цьому спосіб спрацює в усіх сучасних браузерах, на відміну від -webkit-background-clip: text. так що фоллбеков потрібно сильно менше.
Власне, текст без заливки, але з текстурної обведенням теж можна зробити: в цьому випадку патерн слід задати властивості stroke.
Приклади зроблені для тексту, але fill і stroke точно також працюють для фігур.
При використанні заливки для тексту, текст все ще залишається текстом: його можна виділити і скопіювати (спробуйте на прикладах нижче), йому можна задати розмір і шрифт.
Важливе уточнення: в Firefox і старої Опері посилання виду mask: url (#masking); не працюють, якщо сторінка з SVG градієнтами, паттернами і масками знаходиться в одній директорії, а CSS - в інший. Це лікується повним зазначенням шляху від кореня сайту, наприклад mask: url (/ page-url / # masking) ;. щоб браузери знали де саме шукати елемент з таким ID. За вказівку на проблему спасибі legomushroom.
Можливості SVG дозволяють робити найрізноманітніші маски і використовувати їх різними способами, при цьому вони мають дуже непогану підтримку браузерами. Якщо врахувати, що багато властивостей SVG можна анімувати за допомогою JS, перспективи відкриваються абсолютно фантастичні.