Сазнали смо да је ограничење употребе за уметање мало СВГ-а то што не можете писати сложене ЦСС селекторе који утичу на њих. На пример:
Та ДОМ граница у сенци спречава селекторе попут
/* nope */ .parent .child ( )од рада. Можда ћемо једног дана добити делујући ЦСС селектор да продре до те ДОМ границе сјене, али од тренутка писања овог текста још није овде.
И даље можете да поставите попуњавање на родитељу и оно ће се каскадно спустити, али то вам даје само једну боју (не заборавите да fillна те облике не поставите презентацијски атрибут!).
Фабрице Веинберг је смислио малу технику како би добио две боје, користећи currentColorкључну реч у ЦСС-у.
Подесите својство филл ЦСС на било који облик који желите на цуррентЦолор:
.shape-1, .shape-2 ( fill: currentColor; )На тај начин када поставите својство боје на родитеља , то ће се такође слагати. Неће учинити ништа само по себи (осим ако немате унутра), већ currentColorје заснован на, colorтако да га можете користити за друге ствари.
svg.variation-1 ( fill: red; color: orange; ) svg.variation-2 ( fill: green; color: lightblue; )Демо:
Погледајте логотип Пен ЦодеПен као Инлине СВГ аутора Цхрис Цоииер (@цхрисцоииер) на ЦодеПен-у.