Фарба-замовлення - CSS-хитрощі

Anonim

paint-orderВластивість CSS встановлює порядок малювання форм і тексту SVG, включаючи заливку, обведення та будь-які маркери, які можуть бути використані. За замовчуванням ці атрибути малюються в тому самому порядку: заливка, обведення та маркери. Ця властивість дозволяє нам переключити його, щоб ми мали більше контролю над отриманим зовнішнім виглядом.

Там, де ця властивість справді блищить, - це текст SVG, зокрема елемент, який має як заливку, так і штрих. Подобається це:

Тьфу, цей інсульт - корявий. Він має лише 6 пікселів в ширину, але він сортом покриває заливку. Це тому, що заливка фарбується спочатку, за замовчуванням, а потім обведення. Але якщо ми змінимо це, використовуючи paint-orderвластивість, заливка фарбується останньою і покриває непривабливі частини обведення.

О боже, це набагато краще! Ми можемо насправді читати текст, і штрих справжніший за формою символів, ніж раніше.

Синтаксис

paint-order: normal | ( fill || stroke || markers )
  • Початкове значення: normal
  • Застосовується до: фігур та елементів змісту тексту
  • Успадковано: так
  • Тип анімації: дискретна

Цінності

/* Normal */ paint-order: normal; /* Single values */ paint-order: stroke; /* same as: stroke fill markers */ paint-order: markers; /* same as: markers fill stroke */ /* Multiple values */ paint-order: stroke fill; /* same as: stroke fill markers */ paint-order: markers stroke fill;

Варто зазначити, що передавати одне значення цілком законно. Наприклад, якщо ми зробили це:

paint-order: stroke;

… Тоді strokeспочатку буде зафарбовано, а потім інші значення в порядку за замовчуванням. Беручи це до уваги, цей приклад дорівнює наступному:

Це в основному означає, що властивість або приймає значення, normalабо комбінацію fill, strokeі markersв тому порядку, в якому вони повинні бути намальовані.

paint-order: stroke fill markers

А що станеться, якщо не вказано значення чи недійсне значення? Буде використано порядок за замовчуванням: заповнення, обведення, маркери.

Підтримка браузера

IE Край Firefox Chrome Сафарі Опера
Ні 17+ 60+ 35+ 8+ 22+
Android Chrome Android Firefox Браузер Android iOS Safari Opera Mini
85+ 79+ 81+ 8+ Всі
Джерело: caniuse

Подальше читання

  • Масштабована векторна графіка (SVG) Специфікація рівня 2 (Рекомендація кандидата)