CSS и SVG маска
Анализ дизайн с възможности SVG, започва да се интересува от темата за маски.
Всичко тук започна с експеримента:
За надписи, свързани gugloshrift, засенчване модел направен с градиенти, с надпис не е престанал да бъде текстът - това е възможно, за да изберете и копирайте!
Тук трябва да се отбележи, че много по-лесно би било да се използва като пълнеж градиент, без да го опаковане в един модел, но това би трябвало да се определят свойствата градиент spreadMethod = "повтарят". така че той повтори, и Firefox, в този случай на градиента някак си счупи.
Погледнах към подкрепа за демонстрацията в различни браузъри, спомни -webkit-фон-клип: текст. който се поддържа само в vebkitah, и реших да видя какво друго е интересно в това отношение.
Има няколко начина да отрежете елемент на маската. Някои се поддържат от всички съвременни браузъри се поддържат от други много лошо, и не можете да ги използвате, все още. В някои методи, маската може да бъде текст.
- CSS - маската се нанася върху CSS и HTML-елементи;
- SVG + CSS - SVG-маска се нанася на HTML-елементи с помощта на CSS;
- SVG - SVG-маска се нанася на SVG-елементи. С помощта на CSS, но най-важното тук е, че маската и маскираните елементи са SVG.
По-добри браузъри поддържат - маски, изработени изцяло в SVG.
Всички методи, представени в него, тъй като е - без follbekov, така че можете да отворите страницата в браузъра и се интересуват, за да видите как се поддържа така, както искате. Искрено се надявам, че един ден ще видим всички на маските работи във всички модерни браузъри.
Маски идват в различни видове: някои нека тапицерия елемент в формата на вектор (път) - клип. щипка път. Друга забележителност в яркостта на цветове или изображение канал алфа - маска и маска изображение - тези методи произвеждат маска с меки ръбове. Използвайте текст като маска може да бъде в SVG клип-пътека. SVG маска. -webkit-фон-клип и SVG запълване. Последният не е маска в истинския смисъл на думата, но резултатът изглежда като -webkit-фон-клип. и това се поддържа от всички съвременни браузъри.
Всички маски могат да бъдат намерени на страницата демо. Ще разгледам само най-добре поддържаните - разбира се, всички те са на SVG. Всички примери в поста - на живо демонстрация, а не снимки на екрани.
Нам tristique vestibulum Nulla, некласифицирани другаде accumsan. Nullam commodo Eget печал ЕТ ultricies. Nulla ligula Елит, placerat на сапиенс Vel, eleifend tincidunt NIBH. Suspendisse порта Fermentum афоризъм. Крас Eget меценатството Темпус Елит Quis сапиенс Темпус, седнете Amet viverra neque Матис. Quisque на tincidunt ми. Proin на Хусто ес Ipsum Запитване dignissim Vel Quis Ерос. Etiam на либерото commodo, Varius Хусто Quis, interdum erat. Fusce viverra Mollis est, некласифицирани другаде euismod предварителен Матис ут. Aenean ес mauris viverra enim vulputate Bibendum. Цяло число velit metus, cursus et commodo седне Амет, gravida автобиография Пурус. Sed scelerisque в odio без condimentum. Sed neque lacus, rhoncus автобиография сем ут, pharetra vestibulum Елит. Крас ultricies aliquam печал Quis ultrices. Крас Eget mauris tincidunt, aliquam erat Quis, faucibus augue.
SVG клип-път за елементите на SVG
clipPath позволява използването на вектор маска всякаква форма. SVG clipPath заявление за HTML-елементи се поддържа само в Firefox, но ако преместите маркирането в SVG - маска ще работи във всички модерни браузъри.
Фигури вътре clipPath могат да се комбинират, за да получите по-сложно, тъй като в clipPath текст може да се използва. Текстът се използва в clipPath. не можете да изберете и да копирате, текстът на елемента за изрязване - можете, обаче, да го копира по странен начин.
Нам tristique vestibulum Nulla, некласифицирани другаде accumsan. Nullam commodo Eget печал ЕТ ultricies. Nulla ligula Елит, placerat на сапиенс Vel, eleifend tincidunt NIBH. Suspendisse порта Fermentum афоризъм. Крас Eget adipiscing бълхи. Nunc Маса Хусто, placerat в порта на, некласифицирани другаде Mollis Ерос. Nullam ес Хусто erat. Curabitur Eget rhoncus Пурус, interdum Запитване ligula. Ut ultricies Fermentum dignissim. Aliquam et arcu Темпус, euismod NISI ес, lobortis est. Цяло число ultrices aliquet enim ес ultrices. Нам tristique vestibulum Nulla, некласифицирани другаде accumsan. Nullam commodo Eget печал ЕТ ultricies. Nulla ligula Елит, placerat на сапиенс Vel, eleifend tincidunt NIBH. Suspendisse порта Fermentum афоризъм. Крас Eget adipiscing бълхи. Nunc Маса Хусто, placerat в порта на, некласифицирани другаде Mollis Ерос. Nullam ес Хусто erat. Curabitur Eget rhoncus Пурус, interdum Запитване ligula. Ut ultricies Fermentum dignissim. Aliquam et arcu Темпус, euismod NISI ес, lobortis est. Цяло число ultrices aliquet enim ес ultrices.
SVG маска за SVG елементи
SVG маска позволява уточняване елемент или комбинация от елементи, които ще работят на маска или алфа канал в яркостта. SVG маска за HTML-елементи и се поддържа само в Firefox, но при преместване в SVG маркиране работи навсякъде.
Маската може да бъде фигура, степента на прозрачност, зависи от яркостта на цвета на запълване (светли цветове - прозрачен, тъмно - непрозрачност). Фигури декларирани в код, се нарязва слоеве, разположени по-горе. Също така, като образ маска може да се използва.
SVG маска (за разлика от clipPath) ви позволява да направите маска с меки ръбове.
запълване - запълване, а не маска, но ви позволява да се симулира доста добра маска. Може да запълни цвят, градиент, или модел.
Модела (образец) - е SVG елемент. В него можете да сложите всичко, което пожелаете, а след това да се използва съдържанието на контейнера като повтарящ се фон. Възможно е да се създаде модел за други SVG елементи. и го увийте в снимка или текст.
Въпреки това, с текста, има някои трудности: в SVG текст не може да бъде транспортиран от само себе си. За да направите текст с преводите, тъй като по обичайния за HTML, той трябва да бъде опаковано в foreignObject. но напълни с модела не работи. въпреки че спецификациите за модела е написано, че foreignObject в един модел може да бъде поставена.
Така че, за да направи текста запълване, е необходимо да го вмъкнете в текста маркер. и всеки ред да се превърне в tspan и да го настроите на мястото си. Методът тромава, но тя работи.
Използвайки като изображение модел може да бъде получена от всеки текстура надписи, които ще ви подкани вашето въображение. Методът ще работи във всички съвременни браузъри, за разлика от -webkit-фон-клип: текст. така follbekov се нуждаят от много по-малко.
Всъщност текстът без пълнеж, но с текстура инсулт може да се направи: в този случай, моделът трябва да зададете този имот на инсулт.
Примери за това са направени в текста, но запълването и инсулт работата също толкова добре за цифрите.
При използване на запълване на текста, текстът все още е текстът: това е възможно, за да изберете и копирайте (опитайте примерите по-долу), е възможно да се определи размера и шрифта.
Важна забележка: Във Firefox и Opera стария референтен тип маска: URL (#masking); не работят, ако страницата с SVG градиенти, шаблони и маски, съхранени в същата директория, както и CSS - в друга. Той се лекува от пълното име на пътека, на основата на сайта, като маска: URL (/ страница URL / # маскиране). браузъри, за да знаят точно къде да търсите за даден елемент с него. За посочване на проблема благодарение legomushroom.
SVG функции ви позволяват да се направи най-различни маски и ги използват по много различни начини, а те имат много добри браузъри ще подкрепят. Ако ние считаме, че много от SVG свойства могат да бъдат анимирани чрез JS, перспективи се отварят абсолютно фантастично.
Свързани статии