Ми дізналися, що обмеження використання для вставки трохи SVG полягає в тому, що ви не можете писати складені селектори CSS, які впливають на них. Наприклад:
Ця тіньова межа DOM запобігає вибору селекторів
/* nope */ .parent .child ( )від роботи. Можливо, коли-небудь ми отримаємо діючий селектор CSS, щоб проникнути через тіньову межу DOM, але станом на момент написання цієї статті його ще немає.
Ви все ще можете встановити заливку для батьків, і це буде каскадом вниз, але це отримає лише один колір (пам’ятайте, що не слід встановлювати презентаційний fillатрибут на цих фігурах!).
Фабріс Вайнберг придумав акуратний маленький прийом, щоб отримати два кольори, використовуючи currentColorключове слово в CSS.
Встановіть властивість CSS fill для будь-яких фігур, які вам подобаються, currentColor:
.shape-1, .shape-2 ( fill: currentColor; )Таким чином, коли ви встановлюєте властивість кольору на батьківському , це також буде каскадуватися. Він нічого не зробить сам (якщо у вас там немає), але currentColorбазується на colorтому, щоб ви могли використовувати його для інших речей.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Демо:
Дивіться логотип Pen CodePen як Inline SVG від Chris Coyier (@chriscoyier) на CodePen.
