Стилізація масштабованої векторної графіки (SVG) з CSS
Сьогодні ми продовжимо нашу дискусію про Scalable Vector Graphic (SVG), і, як ми вже зазначали в попередньому повідомленні, однією з переваг використання SVG є те, що його можна стилізувати за допомогою CSS.
Властивості SVG Styling
Styling SVG в основному працює так само, як і у звичайних HTML-елементах, вони фактично поділяють деякі загальні властивості. Однак є й інші властивості, призначені спеціально для SVG-об'єкта, які мають власну специфікацію, крім CSS.
Наприклад, в звичайному елементі HTML ми можемо додати колір фону з Колір фону або фону Властивість CSS. У SVG це трохи інше; колір фону задається за допомогою заповнити замість цього. Також, кордон елемента задається з інсульт власності і не з кордону як і в звичайному HTML, повний список можна переглянути тут.
Якщо ви довго працювали з векторним редактором, наприклад, Adobe Illustrator, можна швидко здогадатися, що механізм іменування властивостей у SVG походить від редактора.
Реалізація стилю SVG
Для стилю елемента SVG можна використовувати один з наступних способів;
Атрибути презентації
Якщо ви бачили весь список властивостей SVG, всі вони можуть бути додані безпосередньо на елемент, щоб змінити презентацію елемента. Наступний приклад показує, як ми можемо додати заповнити і інсульт майно безпосередньо на rect елемент;
Прямокутник виявиться схожим на скріншот нижче;
Вставити таблицю стилів
Ми також можемо додати стиль з стиль атрибут. У наступному прикладі ми також додамо заповнити і інсульт до rect, але цього разу ми додамо його в стиль і повертайте його за допомогою CSS3 перетворення власність, подібно до цього;.
Прямокутник повертається в тому ж самому результаті, тільки те, що тепер він також повертається;
Внутрішній аркуш стилів
Вбудуйте стиль SVG у стиль елемент також можливий і нічим не відрізняється від того, як ми робили це за звичайним HTML. Наведений нижче приклад показує, як ми додаємо внутрішні стилі, щоб впливати на елементи SVG у .html документ.
Однак SVG - це мова на основі XML, тому, коли ми збираємося додати вкладений таблицю стилів в a .svg документ, ми повинні помістити декларацію стилів всередину cdata, наступним чином;
The cdata тут потрібно, оскільки CSS може мати > символ, який буде конфліктувати з XML-парсерами. Використання cdata рекомендується для вбудовування стилю в SVG, навіть якщо конфліктуючий символ не вказано в таблиці стилів.
Зовнішній лист стилів
Зовнішня таблиця стилів також працює так само для елементів SVG у .html документ.
Знову в .svg Документ, ми повинні послатися на зовнішню таблицю стилів як xml-stylesheet, так.
Елементи групування
Елементи SVG можуть бути згруповані з
І прямокутник, і коло мають той самий результат.
Заключна думка
Ми пройшли всі важливі питання щодо стилізації SVG за допомогою CSS, і це лише одна з переваг обслуговування графіки у SVG. У наступному посту ми розглянемо ще один, так що залишайтеся з нами.
- Переглянути демонстрацію
- Завантажити джерело
