Svg kitöltés és a stroke • a CSS
SVG: kitöltés és a stroke
Az SVG kitöltése és körvonala van egy csomó érdekes lehetőség, hogy lehetőséget nyújt a sokkal szélesebb, mint mi van CSS.
Például, akkor dolgozzon egy SVG-mintát, és használja azt a nem csak a töltés, hanem a szélütés. Töltsük és a stroke, megadhat egy másik átláthatóság azt is szabályozhatjuk a szaggatott stroke, hogy mit lehet építeni érdekes animált hatások.
Ennek kitöltése és körvonala Beállíthatjuk sem. színét. kulcsszavak (currentColor és átlátszó), valamint a színátmenetek és minták.
Lehetséges értékei: none. kulcsszavak, színek, minták és színátmenetek. Az alapértelmezett érték - fekete.
Tulajdonság határozza meg, hogy mi fog tölteni bonyolult alakzatokat a kereszteződés belül. Az egyszerű formák nem számít, milyen hatása.
Lehetséges értékek: nulla. evenodd
fill-szabály = „nulla” érdekes viselkedik alakjaira kétféleképpen. Például, ha a külső kör látható az óramutató járásával megegyező irányban, és a belső hátrafelé, a középső kör betöltetlen (balra). Ha mind a kört rajzolt az egyik irányba - a szám tölti ki teljesen (jobbra):
fill-fedőképesség
Töltsük átláthatóság ellenőrzés. Beállítható értékek 0,0-1,0, vagy százalékban. Igaz, a Firefox nem szereti a százalékos érték a gradiens (pruflink. Nézz a FF).
Körvonal színe. Nincs alapértelmezett.
stroke-szélességű
A vastagsága a stroke, lehet beállítani hosszegységekben vagy százalék. Az alapértelmezett érték 1.
stroke linecap
Tulajdonság határozza meg, hogy hogyan fog kinézni a sorok végén. Lehetséges értékek: seggét. fordulóban. téren. Alapértelmezett érték: seggét.
stroke linejoin
Ez határozza meg, hogyan fog kinézni a csatlakozó vezetékek a sarkokban. Lehetséges értékek: süveget. fordulóban. ferde. Alapértelmezett érték: süveget.
stroke dasharray
Kezeli a kilátást szaggatott szélütés. Meg lehet meghatározott egység hosszúságú vagy százalékban. Ha be van állítva, hogy egy értéket, a második érték feltételezzük, hogy az első. Például, a stroke-dasharray = „1” húzzon egy vonalat egy egység hosszúságú szegmenseket szóközzel elválasztva az azonos szélességű.
Példák a különböző szaggatott vonalak:
Az agyvérzés és egyszerű formák kaphat elképesztő dolgot:
Mivel a stroke-dasharray érdekes keverékek animáció:
stroke dashoffset
Ez lehetővé teszi, hogy állítsa az eltolás szaggatott löket viszonyítva a kiinduló helyzetbe. Az érték egységekben hosszúságú vagy százalékos értékek lehet negatív. Az alapértelmezett érték 0.
Ebben a példában, a narancs és a sárga vonalak képest el vannak tolva, vörös, különböző értékeket a stroke-dashoffset:
Ötvözi a stroke-dashoffset és a stroke-dasharray létrehozhat érdekes hatásokat.
Az újraindításhoz kattintson újrafuttatása.
Néhány inspiráló hivatkozások találhatóak az animáció a stroke dashoffset:
stroke fedőképesség
Az átláthatóság a löket. Állítsa be az értéket 0,0-1,0.