Недостатки использования изображений в Интернете для типа очевидны: размер файла, отсутствие возможности для часто изменены или пользовательский контент, доступность, времени производства активов и т.д. .

Wouldn’ т было бы замечательно, если бы мы могли стиль буквы же, как мы, как правило, текстовый стиль с помощью CSS?Применение нескольких границ с различными цветами?Добавить внутренние и внешние скосы?Добавить узоры, текстуры и 3D-эффекты?Дайте введите используемый вид?Использование нескольких цветов и искаженное тип?Дайте типа А проблемных взгляд

Сложные SVG фильтры: HTML Для Type

Большинство это уже возможно: Хитрость заключается развязать магию SVG фильтров.SVG фильтры (и CSS фильтры), как правило, считаетсяспособ оживить растровые изображения через эффекты размытия или манипуляций с цветом.Но они гораздо больше.Как правила CSS, SVG фильтр может быть набор директив, чтобы добавить еще один визуальный слой поверх обычного текста.С УС filter собственности, эти эффекты могут быть использованы за пределами SVG и наносить непосредственно на HTML контента .

Слово фильтр Primitives

Как we’ ве узнал, фильтр примитивы являются строительными блоками фильтров SVG.Чтобы иметь влияние, SVG фильтр должен содержать по меньшей мере один примитивный.Примитивный, как правило, имеет одну или две входов (in, in2) и один выход (result).Существует примитивы для размытия, движения, заполнение, объединения или искажая входы .

Спецификация позволяет нам занять несколько атрибутов отфильтрованного элемента в качестве источника входного сигнала.Потому что большинство из них не работают надежно во всех браузерах так или иначе, в этой статье мы будем придерживаться SourceGraphic (элемент нефильтрованного источника с цветами, инсульты, штриховки и т.д.) и SourceAlpha (непрозрачный область альфа-каналом— думаю о нем, как исходных графических заполнены черный), которые имеют очень хорошую поддержку браузера .

Как сгущаться ввода Text

Первый фильтр примитивная мы получим знать feMorphology, примитивная предназначены для расширения (operator="dilate") или тонкий(operator="erode") вход — поэтому идеально подходит для создания контуров и границ .

Вот как мы бы откормить SourceAlpha четырьмя пикселей:

<feMorphology operator="dilate" radius="4" in="SourceAlpha" result="BEVEL_10" />

Создание Extrusion

Следующим шагом является создание 3D экструзии результате из прошлого примитивно.Знакомства feConvolveMatrix.Этот фильтр примитивным является одним из самых могущественных и самых трудно понять.Его основной целью является, чтобы вы могли создать свой собственный фильтр.Короче говоря, вы должны определить пикселя растра (матрица ядра), что изменяет пиксел в соответствии со значениями соседних пикселей.Таким образом, становится возможным создавать свои собственные эффекты фильтра, таких как размытие или фильтр резкости, или для создания выдавливания .

Вот feConvolveMatrix создать 45-градусный, 3-пиксельный глубокий экструзии.order атрибут определяет ширину и высоту, так что примитивная, знает ли применять 3× 3 или 9× 1 матрицу:

<feConvolveMatrix order="3,3" kernelMatrix=
   "1 0 0 
   0 1 0
   0 0 1" in="BEVEL_10" result="BEVEL_20" />

Знайте, что IE 11 и Microsoft Край (в момент написания статьи) не может справиться с матрицами с целью более 8× 8 пикселей, и они не очень хорошо справляются с многострочным матричном, поэтому удаление всех возврата каретки перед развертыванием этот кодбыло бы лучше .

Примитивная будет применяться в равной степени к левой, верхней, правой и нижней.Потому что мы хотим, чтобы выдавить только справа и снизу, мы должны компенсировать результат.Два атрибуты определяют начальную точку эффекта, targetX 63 ~ и |.К сожалению, IE интерпретирует их вопреки всем других браузерах.Поэтому, чтобы сохранить совместимость во всех браузерах, мы будем обрабатывать компенсации с другой фильтр примитивной, feOffset .

Offsetting

Как следует из названия, feOffset принимает ввод и, хорошо, компенсирует это:

<feOffset dx="4" dy="4" in="BEVEL_20" result="BEVEL_30"/>

Прервать экструдированного Part

feComposite является одним из немногих фильтров примитивов, которые принимают два входа.Затем объединяет их, применяя метод для составления двух изображений, называемых Портер Дафф композитинга.feComposite может быть использован, чтобы замаскировать или вырезать элементы.Here’ S, как вычесть выход feMorphology с выхода feConvolveMatrix:

<feComposite operator="out" in="BEVEL_20" in2="BEVEL_10" result="BEVEL_30"/>

Раскраска Extrusion

Это двухступенчатый процесс:

Во-первых, мы создаем цветной области с feFlood.Этот примитивный будет просто выход прямоугольник размер области фильтра в цвете мы определяем:

<feFlood flood-color="#582D1B" result="COLOR-red" />

Мы тогда отрезать часть прозрачного BEVEL_30 с более одного feComposite:

<feComposite in="COLOR-red" in2="BEVEL_30" operator="in" result="BEVEL_40" />

Смешивание конические и источник в одну Output

feMerge делает только, что, смешать скос и источник в один выходной:

<feMerge result="BEVEL_50">
   <feMergeNode in="BEVEL_40" />
   <feMergeNode in="SourceGraphic" />
</feMerge>

Выглядит очень похоже на желаемый результат.Let’ ы сделать это немного более реалистичным, давая ему выветривания взгляд .

Добавление Fractal Texture

feTurbulence является одним из самых веселых примитивов, чтобы играть.Тем не менее, она может расплавить ваш многоядерный процессор и сделать ваши вентиляторы вращаются как турбореактивных двигателей Боинга 747. Используйте его с умом, особенно на мобильных устройствах, потому что это примитив может быть действительно, действительно плохое влияние на производительность рендеринга .

Как feFlood, feTurbulence выводит заполненный прямоугольник, но использует шумный, неструктурированной текстуру .

У нас есть несколько значений под рукой, чтобы изменить внешний вид и ритм текстуры.Таким образом, мы можем создавать поверхности, которые выглядят, как дерево, песок, акварелью или бетоне.Эти параметры оказывают непосредственное влияние на эффективность фильтра, так что у тщательно.Here’ S, как создать узор, напоминающий штрихами:

<feTurbulence baseFrequency=".05,.004" width="200%" height="200%" top="-50%" type="fractalNoise" numOctaves="4" seed="0" result="FRACTAL-TEXTURE_10" />

По умолчанию, feTurbulence выводит цветной текстуры — не то, что мы хотим.Нам нужно в оттенках серого альфа-карту;немного больше контраста будет хорошо, тоже.Let’ ы запустить его через feColorMatrix, чтобы увеличить контраст и преобразовать его в оттенки серого в то же время:

<feColorMatrix type="matrix" values=
   "0 0 0 0 0,
   0 0 0 0 0,
   0 0 0 0 0,
   0 0 0 -1.2 1.1"
   in="FRACTAL-TEXTURE_10" result="FRACTAL-TEXTURE_20" />

Последнее, что нужно сделать, это составить текстурированной альфа в букв с нашим старым другом feComposite:

<feComposite in="BEVEL_50" in2="FRACTAL-TEXTURE_20" operator="in"/>

! __ Урон 5 |

Как применять SVG фильтры для SVG Content

Есть два способа применения фильтров SVG к SVG text элемент:

1. Через CSS

.filtered {
   filter: url(#filter);
}

2. Через Attribute

<text filter="url(#filter)">Some text</text>

Применение фильтров SVG Для HTML Content

Один из самых интересных особенностей фильтров является то, что it’ S можно встроить SVG, определить фильтр в нем, а затем применить его к любому HTML элементу с помощью CSS:

filter: url(#mySVGfilter);

На момент написания, Blink и WebKit требует, чтобы это префикс:

-webkit-filter: url(#mySVGfilter);

Как легко, как это звучит в теории, этот процесс темно искусства в реальном мире: