Инлине СВГ може бити „стилизован“ у смислу да већ има испуне и потезе и шта друго кад га ставите на страницу. То је сјајан и потпуно фин начин за употребу уграђеног СВГ-а. Али можете и да уоквиришете СВГ помоћу ЦСС-а, што је заиста сјајно, јер, претпостављам за многе од нас, ЦСС се осећа моћно и пријатно.
Дјелује прилично онако како бисте очекивали. Ево једноставног примера:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )Могло би се рећи да ЦСС има мало више снаге од атрибута стила на самим СВГ елементима. Да је то слично fill="red", ЦСС би и даље „победио“. Можда мислите супротно јер се чини да би атрибути стила били моћни попут уграђених стилова, али нису. Уграђени стилови су и даље моћни.
Исто тако, ЦСС правила се не спуштају ако се догоди нешто конкретније. На пример:
.parent ( fill: red; )ЦСС губи у овом случају, јер се плава тачније примењује на рецт.
Ако планирам да обликујем СВГ кроз ЦСС, генерално ми је најлакше да у потпуности оставим атрибуте стила изван СВГ елемената.
Важно је знати опрез!
Провели смо време разговарајући о томе . Рецимо да је ситуација таква:
На крају се то „дете“ стави у тог „родитеља“, зар не? Јел тако. Дакле, ово би требало да успе?
.parent .child ( fill: red; )Али није.
На тај начин функционише, он то клонира и ставља у „Схадов ДОМ“ у том другом СВГ-у. Не можете проћи кроз тај ДОМ сенке са таквим селектором. Једноставно не иде. Можда ће једног дана бити решења, али тренутно га нема.
Можете:
.parent ( fill: red; )А то попуњавање ће се слагати и утицати на подређене елементе ако на том путу нема ништа конкретније. Или
.child ( fill: red; )и утичу на све случајеве тог детета. Али само не обоје.
Ако вам требају различито стилизоване верзије исте ствари ...
Само дуплирајте или шта год вам треба. Велика већина информација биће идентичне, а ГЗип једе идентичан текст за доручак.