Iekļauto SVG var “noformēt” tādā ziņā, ka tam jau ir aizpildījumi un vēzieni, un kas tad, kad jūs to ievietojat lapā. Tas ir lielisks un pilnīgi labs veids, kā izmantot iekšējo SVG. Bet jūs varat arī stilizēt SVG, izmantojot CSS, kas ir diezgan lieliski, jo, es domāju, daudziem no mums CSS ir tas, kur mēs jūtamies spēcīgi un ērti.
Tas darbojas diezgan daudz, kā jūs varētu sagaidīt. Šeit ir vienkāršs piemērs:
.my-rect ( fill: blue; /* remember it's fill not background, teamsters */ )CSS ir mazliet “vairāk spēka”, varētu teikt, nekā stila atribūti pašiem SVG elementiem. Ja tam būtu paticis fill="red", CSS joprojām “uzvarētu”. Jūs varētu domāt pretēji, jo šķiet, ka stila atribūti būtu spēcīgi, piemēram, ievietotie stili, taču tie nav. Inline stili ir joprojām ir spēcīgs, lai gan.
Tāpat CSS noteikumi netiek samazināti, ja vispār kaut kas notiek. Piemēram:
.parent ( fill: red; )CSS šajā gadījumā zaudē, jo zilā krāsa tiek precīzāk pielietota taisnstūrim.
Ja es plānoju veidot SVG, izmantojot CSS, man šķiet, ka visvieglāk ir vienkārši atstāt stila atribūtus no SVG elementiem pilnībā.
Svarīga lieta, kas jāzina trauksme!
Mēs esam pavadījuši laiku, runājot par . Sakiet, ka šī ir situācija:
Galu galā šo "bērnu" ievieto tajā "vecākā", vai ne? Pa labi. Tātad tam vajadzētu darboties?
.parent .child ( fill: red; )Bet tā nav.
Šis veids , kā tas darbojas, to klonē un ievieto “Shadow DOM” tajā otrajā SVG. Ar tādu selektoru jūs nevarat iekļūt tajā ēnu DOM. Vienkārši nedarbojas. Varbūt kādreiz būs kāds risinājums, taču šobrīd tā nav.
Jūs varat darīt, piemēram:
.parent ( fill: red; )Un šī aizpildīšana kaskādē un ietekmēs bērna elementus, ja ceļā nav nekā konkrētāka. Or
.child ( fill: red; )un ietekmē visus šī bērna gadījumus. Bet tikai ne abi.
Ja jums ir vajadzīgas viena un tā paša veida versijas ...
Vienkārši dublējiet vai visu nepieciešamo. Lielākā daļa informācijas būs identiska, un GZip brokastīs ēd identisku tekstu.