Hogyan készítsünk szöveget adaptív

Hogyan készítsünk SVG adaptív CSS-t

Az SVG-t különböző módon lehet beépíteni egy weblapba; Egyikük – HTML5 tag SVG használata. Más módok közé tartozik az SVG beágyazása az IMG, az objektumcímkék, valamint az iframe használatával, vagy a CSS háttérként.

Elvileg az SVG skála ugyanolyan egyszerűnek kell lennie, hogy bármilyen magassági értéket vagy a tartály szélességét beállítsa. A különböző böngésző beállításainak köszönhetően azonban nem olyan könnyű az SVG adaptív.

Mindazonáltal vannak olyan trükkök, amelyeket a kívánt eredmény eléréséhez használhatunk. Ebben a cikkben több módot fogunk nézni, hogy segítsen SVG adaptív.

Hogyan készítsünk SVG “gumi” CSS-t

Ahhoz, hogy az SVG “gumi” legyen, először el kell távolítania a magasságot és a szélességi attribútumokat. Ha a magasság és az SVG szélesség pontos értékei semmilyen módon nem nyújthatók automatikusan. Érdemes azonban hagyja a VideóBox attribútumot. A magasság és az SVG szélesség tulajdonságainak tisztítása után az oldal többféleképpen helyezhet be.

SVG beágyazása az IMG-vel

Ha az SVG beépített képként, az IMG címke magassága és szélessége, a böngésző által használt címkén megadott címkével megadott, az SVG méretének vezérléséhez. Az SVG tartalma a megtekintési ablakban található, az SVG-ben megadott megjelenítési értéktől függően.

Img src = “my_svg_hab” alt = “kép leírása.”/ img src =” my_svg_hab “alt =” Kép leírása.”/

Általában a böngészők meglehetősen funkcionálisak az SVG szélességének és magasságának meghatározásához, még akkor is, ha nem adja meg az IMG elem szélességét és magasságát. Például, ha meg kell tenni IMG DIV meghatározása nélkül magassága és szélessége, a Chrome és a Firefox úgy dönt, hogy a szélesség img =%; Az SVG-t ezután kinyújtja, hogy kitöltse a divatartalmat, és magassága alkalmas az arányok megőrzésére. Ezután a div – a nagymértékben változik, és az IMG SVG beállítva van. Azonban, ha raszteres képpel dolgozik, például a PNG-mintát nem lehet kinyomtatni; Ebben az esetben meg kellett volna állítanunk az IMG szélességét% CSS-vel.

Az Internet Explorerben a dolgok eltérőek. Ha nem adja meg az IMG szélességét, akkor a böngésző megoldja, hogy a magasság px, így ez a méret jelenik meg CSS specifikációk szabványként; Szabványos képszélesség egyenlő px. Az SVG ezután a div belül helyezkedik el, amely úgy van, hogy magassága egyenlő legyen a px-vel; Bár feltételezzük, hogy a szélesség% lesz; Az SVG mindig a PX magasságát veszi figyelembe, függetlenül attól, hogy milyen széles a tartály, ami mindkét oldalon széles fehér teret eredményez. Ennek a kérdésnek a kezelésére, azaz elegendő, hogy kifejezetten az img szélességét% -ban állítsa be. Ezeket az eredményeket az Internet Explorer 9 és 11-ben végzett vizsgálatok vizsgálatában kaptuk.

Így az svg “Radír”, Először távolítsa el az SVG-ben megadott magasságot és szélességeket, majd adjon hozzá egy CSS-vonalat az Internet Explorerhez: így az SVG létrehozásához “Radír”, Először távolítsa el az SVG-ben megadott magasságot és szélességeket, majd adjon hozzá egy CSS-vonalat az Internet Explorerhez:

/ * Javítás az IE * / img {szélesség:%; }

Felhívjuk figyelmét, hogy ha úgy dönt, hogy állítsa be a szélességét és magasságát IMG tag több, mint%, akkor az SVG méretét úgy kell tervezni, mintha a szélesség és a magasság volt megadva közvetlenül SVG elem.

SVG beágyazása objektum használatával

SVG beágyazása objektumon keresztül, sok szempontból úgy néz ki, mint ugyanaz a folyamat, amikor az IMG-vel dolgozik.

Objektum típusa = “Kép / SVG + XML” adatok = “my_svg_hab” !– Visszatérés itt (IMG A grafika PNG-verziójának hivatkozása, például) – / objektum

Ugyanúgy, mint az IMG, a Firefox és a Chrome címke, határozza meg az SVG objektum szélességét% -ban, és a magasság aránya arányban változik a képernyő szélességének növekedésével. Ha az Object-U beállítja a szélességet és a magasságot, akkor az SVG grafika egy meghatározott méretű különálló megtekintési területbe illeszkedik.

Az Internet Explorer esetében ugyanaz a probléma merül fel, amiről korábban említettük, amikor az alapértelmezett SVG magasság megegyezik a px-vel. A probléma a% szélesség beállításával is megszűnik:

/ * Javítás az IE * / objektum {szélesség:%; }

Svg beágyazása az iframe-vel

Az iframe nagyon hasonlít az objektum működésében és funkcióiban.

iframe src = “my_svg_hab” !– (IMG hivatkozás a grafika PNG-verziójának hivatkozása, például) – / iframe

A böngészők azonban különböző módon reagálnak erre a módszerre. A mai napig króm, Firefox és Internet Explorer van behelyezve IFrame SVG: PX Szélesség és PX Heights. A korábbi esetekben, amikor az IE-t használta a standard px magasságot, a% szélességet használta. Ha azonban az IFRAME-hez kerül, mindhárom böngésző telepítve van, és az iframe szélessége és szélessége’és a PX-ben rögzített px méretben.

A szélesség% használata az iframe-t kitölti a tartály szélességének kitöltéséhez, de a magasság nem változik, még mindig megegyezik a px-vel; Még akkor is, ha a tartály és az iframe kisebb szélességre csökken, mint az eredeti SVG szélesség, iframe továbbra is támogatja a PC-t, Futtatja a fehér terek megjelenését az SVG kép felett és alatt. Ez mindhárom böngészőben történik.

Az SVG magasság megváltoztatásának egyetlen módja pontosan beállíthatja az iframe-on. Ezután a magasság, majd természetesen a szélességgel együtt egy olyan látóablakot képez, amelyen belül az SVG lesz elhelyezve. Ha azt szeretné, hogy az SVG beilleszkedjen a nézőablakba, anélkül, hogy fehér szóközök nélkül / alatt / alatt van, akkor meg kell győződni arról, hogy a megtekintési ablak (iframe) meghatározott magassága és szélessége megfelel a magasság arányának és szélességének Svg kép.

Nem létezik “Alapértelmezett” Eljárás egy adott szélesség arányú elem létrehozására a CSS-ben. Azonban néhány évvel ezelőtt, Thierry Koblenz közzétették Cikk a listán kívül, amelyben a recepciót írják le, amely ma ismert, mint a töltés hack; Hack, lehetővé téve, hogy belső kapcsolatokat hozzon létre a videó és iframe.

Ötlet padding hack’És a belső francia bekezdések kapcsolatának a szélességének. Amikor a közbenjárás telepítve van százalékarány, kamat az elem szélességéhez viszonyítva, Még akkor is, ha csak a felső belső fűtést helyezzük. Hasonló recepciót használhatunk az SVG esetében, hogy egy elemet készítsen “Radír”. Az alábbi lépéseket az alábbiakban ismertetjük a szükséges hatás elérése érdekében.

Hagyja, hogy a teszt svg így néz ki:

Svg xmlns = “HAB” verzió = “” width = “” magasság = “Viewbox =” 0 0 ” !– SVG tartalom – / SVG

Padding Hack 1. lépés

Annak érdekében, hogy az SVG adaptív legyen, amikor az IFrame-be épül, ugyanezt kell tennie, amit korábban tettünk: Távolítsa el a magassági és szélességi attribútumokat az SVG elemből.

Svg xmlns = “HAB” verzió = “Viewbox =” 0 0 ” !– SVG tartalom – / SVG

Padding Hack 2. lépés

Ezután győződjön meg róla, hogy a Viewboard attribútum beállítása. A legtöbb esetben az SVG lesz a megadott nézetbox.

Nem kell kifejezetten megkérdezni BemutatóSpectRatio A szabványos érték óta (Xmidymid találkozik) az a jelentés, amely megfelel nekünk. Ezért nincs szükség arra, hogy csak az értéket kell megadni BemutatóSpectRatio nem lehet olajbogyó a szabványtól.

Svg xmlns = “HAB” verzió = “Viewbox =” 0 “preservEASSPECTRATIO =” XMIDYMID megfelel ” !– SVG tartalom – / SVG

Padding Hack 3. lépés

Annak érdekében, hogy a feltöltött hack-t megmunkálják, az SVG-t a tartályba kell helyezni. Erre a célra megfelelünk a div. Ez a tartály belső arányt kap a padding hack segítségével’A (következő lépés), majd az IFrame automatikusan a tartályba kerül.

!– Wrap SVG egy tartályban – DIV osztály = “konténer” iframe src = “my_svg_hab” !– Beszerzés itt – / iframe / div

Padding Hack 4. lépés

Ezután többféle stílust alkalmazunk a tartályba a következő szabályok szerint:

.Konténer {magasság: 0; Szélesség: szélességérték; Padding-Top: (SVG magasság / svg szélesség) * szélességérték; Pozíció: relatív; }

Tehát pontosan mit csinál a fenti szabályok?

Először eldobjuk a tartály magasságának értékét. Mivel a belső francia bekezdések az elem szélességéhez viszonyítva vannak kiszámításra, meg kell állapítanunk őket az elemhez képest, hogy megismételjük a függőleges bővítést.

Miután jeleztük a tartály szélességét, amelyet automatikusan a százalékos érték segítségével kell megnyújtani, állítsa be a felső belső (vagy alsó) tartály bemélyedésének értékét a következő képlet alkalmazásával. Ez a képlet az SVG magasság és szélességi attribútumok attribútumértékét használja, amelyet az 1. lépésben eltávolítottunk, hogy meghatározzuk a töltési értéket, amely lehetővé teszi a tartály végtelen francia bekezdését, hogy megfeleljen az SVG méreteknek.

Logo-ban a szélesség SVG px, és a px magassága. 50% -kal állítottam be a tartály szélességét úgy, hogy elfoglalja a rendelkezésre álló vízszintes tér felét. A tartályra alkalmazott töltés egyenlő (/) * 50 = 48%. Ez az, hogy a konténer kódja így néz ki:

.Konténer {szélesség: 50%; Magasság: 0; Padding-Top: 48%; Pozíció: relatív; }

Mivel a tartály magasságát lőtték le, és a felső belső fellendülés nagy kimenetét helyeztük el, a tartalom leereszkedik.

Az SVG visszahúzásához az iframe-t a tartályba helyezzük. Itt lép be a játékba: relatív, amely segít a SVG megfelelő pozíciójának beállításában.

Padding Hack 5. lépés

Most, hogy van egy helyezett kontextusunk, helyezzük az iframe-t a tartályba, és kiemeljük méretét úgy, hogy egybeesik a tartály magasságával és szélességével:

iframe {pozíció: abszolút; Top: 0; balra: 0; szélesség:%; Magasság:%; }

Ez minden, ami szükséges ahhoz, hogy az SVG adaptív legyen. Az iframe egy szabványos keretként jelenik meg, amelyből úgy tűnik, hogy megszabadulni akarsz. Ez elég ahhoz, hogy hozzáadjon egy szabályt: Border: Nincs;

Svg beágyazása svg svg segítségével svg

Az SVG a HTML-dokumentumba beépíthető az SVG címkével.

!– Megjegyzés: Az XMLNS nem szükséges egy HTML5 dokumentumban – SVG XMLNS = “HAB” verzió = “Viewbox =” 0 ” !– SVG tartalom – / SVG

A beépített SVG megtekintési ablak szélessége és magassága ugyanaz lesz, amit megérdemelt SVG elemet kértek. Ha a szélesség és a magasság attribútumok eltávolításra kerülnek, az összes böngésző az egyenlő% és a SVG vízszintes szélességét érzékeli, hogy kitöltse a tartály szélességét.

A Chrome és a Firefox-ban az SVG magassága kiszámításra kerül, ahogy van szükségünk. Ebben az esetben az alkalmazkodóképesség különleges veszteségek nélkül érhető el.

Az Internet Explorerben (a 9. és 11. verziókra igazolt), a magasság ismét megegyezik az RX-vel és a szélesség% -kal. Mint az előző esetekben, amikor megváltoztatja a képernyő méretét, megjelenik az SVG felső és alsó része. Az IMG használatakor elegendő volt megadni a szélességet:%; Azonban a% SVG szélességének kiállítása ugyanolyan hatás nem érhető el. Ebben az esetben a legjobb megoldás lesz a Padding Hack használata.

Div osztály = “konténer” svg xmlns = “HAB” verzió = “” Viewbox = “0 0” !– SVG tartalom – / svg / div .Konténer {szélesség: 50%; Magasság: 0; Padding-Top: 48%; Pozíció: relatív; } Svg {Pozíció: abszolút; Top: 0; Bal: 0; }

SVG beépített, mint háttérrajz CSS segítségével

Az egyik népszerű SVG beágyazási módszer a háttérrajz használata:

.Element {Background kép: URL (my_svg_hab); / * Egyéb stílusok * /}

Szerencsére nem kell alkalmazni a szükséges javításokat, vagy khaki, hogy az SVG háttér rajz viselkednek szükséges – az SVG háttér mintázat található, alkalmazzák, megváltozott a méret és méretezhető, mint bármely háttér rajza.

SVG adaptív készítése a CSS média kéréseivel

Az a tény, hogy az SVG belsejében lévő grafikus elemek az XML használatával készültek, az SVG-vel nagyon kényelmesek. Mivel az SVG tartalom az XML-címkékből áll, amelyek grafikákat mutatnak, kiválaszthatunk egyedi elemeket, és specifikus stílusokat alkalmazhatunk azokhoz, ahogyan a CSS-választók segítségével választjuk a HTML elemeket.

Az SVG elemek általában bemutathatók prezentációs attribútumokkal, mint a kitöltés, a stroke, a transzformáció és más. Az összes prezentációs attribútum csak egy részhalmaza állítható be a CSS használatával. Megtalálhatja a megadott stílusok listáját, SVG stílusok specifikációjában. A CSS tulajdonságainak használatával megadott attribútumok listája nem tartalmazza az X, Y, szélesség és magasság attribútumokat; Ez a négy azonban hozzáadódik a listához, és képesek leszünk beállítani őket CSS-vel.

Néhány leggyakrabban feltett tulajdonság: kitöltés, amely úgy működik, mint a háttérszín; A határhoz hasonló stroke; Opacity, kijelző, átalakítás és mások.

Ezután fogunk hozzá média kéréseket belül Tag Stílus belül SVG:

Svg xmlns = “HAB” verzió = “Viewbox =” 0 “stílus / * CSS stílusok és média lekérdezések itt * / / style !– SVG elemek itt – / SVG

Itt helyezze be a logót:

IMG SRC = “HAB” ALT = “LOGO” /

Itt az ideje megjegyezni, hogy a média kérésekben megadott méretek az SVG megtekintési ablak méretére vonatkoznak. Az SVG beágyazott módszerétől függően a megtekintés ablak lehet az SVG méretének (beágyazott svg), vagy a referencia SVG elem mérete.

Az SVG belsejében lévő elemek azonosítója van, amit a CSS-ben használhatunk:

Svg xmlns = “HAB” verzió = “Viewbox =” 0 “útvonalazonosító =” curved_bg “fil =” # “d =” “/ g ID =” elsődleges_content “kitöltése =” # ececec “útvonalazonosító =” ikon ” = “” / Path ID = “Belső-kör” D = “” / Path ID = “középső kör” d = “” / g!– / Elsődleges tartalom – G ID = “Secondary_content” kitöltés = “# ECECEC” elérési út azonosító = “alsó szöveg” D = “” / Path ID = “Felső-szöveg” D = “” / Path ID = “külső kör” D = “” / Circle ID = “bal-pont” CX = “CY =” CY = “R =” 3 “/ kör azonosító =” jobb pont “cx =” “cy =” “r =” 3 ” G!– A másodlagos tartalom vége – / SVG

A SVG belsejében történő stílust használva olyan média kéréseket hozunk létre, amelyek az ablak méretétől függően módosítják a stílusokat. Az SVG az alábbi képek szerint változik:

A CSS kitöltési és optikai tulajdonságait használjuk. Csökkentett ablakméret, a logó háttere eltűnik, és a kitöltés színe a sötétkéken fehéren változik. Mivel a képernyő csökken, a logó szövegrésze megtisztul, hogy kevesebbet helyezzen el a képernyőn. És végül az ikonra kiterjedő kör tisztításra kerül, és csak egy horgony ikon marad nagyon kicsi képernyőkön.

A média támogatásával együtt SVG fájlunk a következőképpen fog kinézni:

Svg xmlns = “HAB” verzió = “Viewbox =” 0 “stílus SVG * {átmenet: kitöltés .1s könnyű-ki, átlátszatlanság .1s könnyű-ki; } @Media minden és (max-szélesség: px) {#curved_bg {opacity: 0; } #Secondary_content, #primary_content {kitöltés: #; }} @Media mind és (max-szélesség: px) {#secondary_content {opacity: 0; }} @Media All és (max-szélesség: px) {# belső kör, # középső kör {opacity: 0; }} / Style path id = “Curved_bg” fil = “#” d = “” / !– — / Svg

A logó megváltoztatása a képernyő méretétől függően – az alkalmazkodóképesség is. A vállalatok egyes logói túl sok helyet foglalhatnak el a kis képernyőkön, így egyre inkább látjuk, hogy hány logót adaptálunk, hogy megszabaduljon a szövegrészből. SVG nélkül lehet elérni a PNG-t a különböző méretű képernyőkön keresztül. Ez a megközelítés azonban nem túl hatékony, mert több képet kell tárolnod a kiszolgálón. Ebben az esetben az SVG előnyei jól láthatóak: rugalmasan használható és kiváló megjelenítés a képernyőkön.

Befejezés

A Chrome és Firefox új és új verzióinak kiadásával az SVG támogatása növekszik, így az e cikkben szereplő információk bizonyos pontokon nem lehet relevánsok. Az Internet Explorer, mint mindig lelassítja az egész mozgást, így az említett javítások sokáig relevánsak lesznek.