CSS és svg maszk • a CSS
CSS és SVG maszk
Elemezve design SVG lehetőség, érdeklődni kezdett a téma a maszkokat.
Itt minden kezdődött a kísérlet:
Mert feliratokat kapcsolatban gugloshrift, árnyékoló minta készült színátmenetek, a felirat nem megszűnt a szöveget - lehet kiválasztani és másolni!
Itt meg kell jegyezni, hogy sokkal könnyebb lenne használni, mint a kitöltés gradiens, csomagolás nélküli ez a minta, de ez volna a színátmenet tulajdonságait SpreadMethod = „ismétlés”. így járunk el, és a Firefox, ebben az esetben a gradiens valahogy eltört.
Néztem támogatást a demo a különböző böngészőkben, emlékezett -webkit-háttér-klip: szöveget. amelyet csak támogatott vebkitah, és úgy döntött, hogy mi mást is érdekes ebben a tekintetben.
Számos módja van, hogy vágja elemet a maszkot. Néhány támogatja az összes modern böngésző által támogatott másik nagyon rossz, és nem tudja használni őket még. Néhány módszer a maszk lehet szöveget.
- CSS - a maszkot alkalmaznak a CSS és HTML-elemeket;
- SVG + CSS - SVG-maszkot alkalmaznak a HTML-elemek a CSS;
- SVG - SVG-maszkot alkalmaznak az SVG-elemek. Segítségével a CSS, de a lényeg az, hogy a maszk és a maszkos elemek SVG.
Jobb böngésző támogatja - a maszkok teljes egészében az SVG.
Minden bemutatott módszerek úgy, ahogy van - anélkül follbekov, így meg tudja nyitni az oldalt a böngészőben, és érdekli, hogy hogyan támogatja a kívánt módon. Nagyon remélem, hogy egy napon fogunk látni az összes maszkok működik minden modern böngészőben.
Maszkok jönnek a különböző típusok: néhány hagyja díszítőelemeket a vektoros alakzatot (útvonal) - klip. clip-path. Egy másik mérföldkő a fényerő a színek, vagy az alfa-csatorna kép - maszk és maszk-kép - ezek a módszerek egy maszk finom élek. Szöveget használ maszkot lehet SVG clip-path. SVG maszk. -webkit-háttér-klip és az SVG fill. Az utóbbi nem egy maszk a legigazibb értelemben vett, de az eredmény így néz -webkit-háttér-klip. és ezt támasztja alá az összes modern böngészőben.
Minden maszkok megtalálható a demo oldalon. Én csak beszélni a legtöbb jól támogatott - persze, ezek mind az SVG. Az összes példa a poszt - élő demo, nem screenshotok.
Nam tristique vestibulum nulla nec accumsan. Nullam commodo Eget dolor et ultricies. Nulla ligula elit, placerat egy sapiens vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictumnak. Cras eget Maecenas tempus elit quis sapiens tempus, sit amet Viverra neque Mattis. If a tincidunt mi. Proin a Justo eu ipsum Érdeklődés dignissim vel quis eros. Etiam a libero commodo, varius justo quis, interdum erat. Fusce Viverra mollis est, nec euismod ante Mattis ut. Aenean eu mauris Viverra enim vulputate Bibendum. Integer Velit metus, cursus et commodo sit amet Gravida vitae purus. Sed scelerisque meg odio nem condimentum. Sed neque Lacus, rhoncus vitae sem ut, pharetra vestibulum elit. Cras ultricies Ossza dolor Quis ultrices. Cras eget mauris tincidunt, Ossza erat quis, faucibus augue.
SVG clip-utat a SVG elemek
clipPath lehetővé teszi a használatát egy vektor maszk semmilyen formában. SVG clipPath kérelem HTML-elemek csak támogatja a Firefox, de ha mozog a jelölő az SVG - maszk fog működni minden modern böngészőben.
Figurák clipPath lehet kombinálni, hogy bonyolultabb, mint a clipPath szöveg használható. A használt szöveg clipPath. nem tudja kiválasztani, és másolja, a szöveg a képkivágás elem -, akkor viszont másolta furcsa módon.
Nam tristique vestibulum nulla nec accumsan. Nullam commodo Eget dolor et ultricies. Nulla ligula elit, placerat egy sapiens vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictumnak. Cras eget adipiscing magna. Nunc massa Justo, placerat Porta at, mollis nec eros. Nullam eu justo erat. Curabitur eget rhoncus purus, interdum Érdeklődés ligula. Ut ultricies fermentum dignissim. Ossza et Arcu tempus, euismod Nisi eu, lobortis est. Integer ultrices aliquet enim eu ultrices. Nam tristique vestibulum nulla nec accumsan. Nullam commodo Eget dolor et ultricies. Nulla ligula elit, placerat egy sapiens vel, eleifend tincidunt nibh. Suspendisse porta fermentum dictumnak. Cras eget adipiscing magna. Nunc massa Justo, placerat Porta at, mollis nec eros. Nullam eu justo erat. Curabitur eget rhoncus purus, interdum Érdeklődés ligula. Ut ultricies fermentum dignissim. Ossza et Arcu tempus, euismod Nisi eu, lobortis est. Integer ultrices aliquet enim eu ultrices.
SVG maszk SVG elemek
SVG maszk lehetővé teszi meghatározó eleme vagy elemek kombinációja, hogy működni fog egy maszkot vagy alfa-csatorna a fényerő. SVG maszk HTML-elemeket, és csak támogatni a Firefox, de ha mozog a SVG jelölő mindenhol működik.
A maszk lehet egy szám, az átláthatóságot függ a fényerő a kitöltés színe (világos színek - átlátszó, sötét - fedőképesség). Bejelentett adatok az alábbi kódot, vágjuk réteg felett helyezkedik el. Továbbá, mint egy maszk kép lehet használni.
SVG maszk (ellentétben clipPath) lehetővé teszi, hogy egy maszk finom élek.
töltse - írja, és nem egy maszkot, de lehetővé teszi, hogy szimulálja egy nagyon jó maszkot. Kitöltheti szín, színátmenet vagy minta.
Pattern (minta) - van SVG elem. Ebben meg lehet tenni, amit szeret, akkor kell használni a tartály tartalmát, mint egy ismétlődő alapon. Lehetőség van, hogy hozzon létre egy minta az SVG elemek. és csavarja be egy képet vagy szöveget.
Azonban a szöveget, van néhány nehézség: SVG szöveget nem lehet szállítani is. Ahhoz, hogy a szöveg a fordításban, mint a szokásos HTML, akkor be kell csomagolni foreignObject. de megtelnek a minta nem működik. Bár a specifikáció a minta van írva, hogy foreignObject egy mintázat lehet beilleszteni.
Tehát, hogy a szöveg kitöltés, szükséges, hogy helyezze át a szöveget tag. és minden sor fordulni TSPAN és állítsa a helyére. A módszer nehézkes, de működik.
Használata, mint a minta képet kaphatunk olyan feliratokat struktúra, amely bekéri a képzelet. A módszer működik minden modern böngésző, ellentétben -webkit-háttér-klip: szöveget. így follbekov szüksége sokkal kevesebb.
Valójában, a szöveget anélkül, kitöltés, de a textúra löket is el lehet készíteni: ebben az esetben a minta kell állítsa ezt a tulajdonságot a stroke.
Példák készülnek a szöveget, de a kitöltés és a stroke munka ugyanúgy a számokat.
Amikor a kitöltést a szöveget, a szöveg mindig a szöveg: lehetséges, hogy kiválassza és másolja (próbálja az alábbi példákat), lehetséges, hogy a méretet és a font.
Fontos megjegyzés: A Firefox és az Opera, a régi referencia típusú maszk: url (#masking); nem működik, ha az oldal SVG színátmenetek, minták és maszkok alatt ugyanabban a könyvtárban, és CSS - egy másik. Úgy kezelik a teljes elérési útja a gyökere a helyén, mint a maszk: url (/ oldal url / # maszkolás). böngészők, hogy pontosan tudják, hol kell keresni egy elemet az azonosítóval. Rámutatva a probléma, köszönhetően legomushroom.
SVG funkciók lehetővé teszik, hogy a különböző maszkok és használja őket sokféleképpen, és nagyon jó a böngésző támogatja. Ha figyelembe vesszük, hogy sok SVG tulajdonságok animált keresztül JS, kilátások nyílnak fantasztikus.