HTML5 SVG 2D Введение 10 - Определение и использование фильтров

Автор：Eve Cole Время обновления：2025-04-04 01:00:03

Фильтры можно рассматривать как самую мощную особенность SVG. Они позволяют добавлять эффекты фильтра, которые доступны только в профессиональном программном обеспечении в графику (графические элементы и элементы контейнеров). Это позволяет вам легко генерировать и изменять изображения на стороне клиента. Более того, фильтр не разрушает структуру исходного документа, поэтому он также очень поддерживается.

Фильтры определяются элементами фильтра : При необходимости добавьте атрибуты фильтра в графику или контейнеры, которые требуют эффектов фильтра, и обращаются к соответствующим фильтрам.

Элементы фильтров содержат много фильтровальных атомных операций; Каждая атомная операция выполняет основную графическую операцию на входящем объекте и производит графический выход. Большинство атомных операций дают результаты в основном изображение RGBA. Вход в каждую атомную работу может быть либо исходным графом, либо результатом других атомных операций. Следовательно, процесс ссылки на эффект фильтра заключается в применении соответствующих атомных операций фильтра на исходной графике, и, наконец, генерировать новую графику и отображать ее.

При использовании атрибута фильтра на контейнере (например, элемент G) эффект фильтра будет применяться ко всем элементам в контейнере. Тем не менее, элементы в контейнере не отображаются непосредственно на экран, а временно хранятся. Графические команды затем выполняются как часть процесса обработки указанных элементов фильтра, а затем рендеринга. Это указывается с использованием исходной графики и sourcealpha. Этот эффект демонстрируется в третьем случае во втором примере ниже.

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

Давайте посмотрим на пример:

xmlns = "http://www.w3.org/2000/svg" версия = "1.1">

<Title> Пример эффекта фильтра SVG </title>

<CSCE> Используйте различные эффекты фильтра для достижения 3D -осветительного эффекта пары графики. </desc>

<FEFS>

<fespecularlighting in = "blur" surfacescale = "5" SpecularConstant = ". 75"

specularexponent = "20" Lighting-color = "#bbbbbbb"

result = "Specute">

</fespecularlighting>

<fecomposite in = "sourcegraphic" in2 = "specout" operator = "Арифметика"

k1 = "0" k2 = "1" k3 = "1" k4 = "0" result = "Litpaint"/>

</femerge>

</filter>

</defs>

<g>

<path fill = "none" chrouch = "#d90000"

D = "M50,90 C0,90 0,30 50,30 L150,30 C200,30 200,90 150,90 Z" />>>

<path fill = "#D90000"

D = "M60,80 C30,80 30,40 60,40 L140,40 C170,40 170,80 140,80 Z" />

<текст x = "52" y = "76"> svg </text>

</g>

</svg>

Эффект этого примера, работающего на Firefox, является результатом последнего изображения:

Примечание: могут быть некоторые различия в других браузерах.

Этот фильтр использует 6 эффектов, в свою очередь (одностадийный рендеринг показан на рисунке выше :):

Fegaussianblur: Этот шаг состоит в том, чтобы выполнить обработку размытия гауссов; Вход этого специального эффекта является значением прозрачности исходного изображения, а выход хранится во временном буфериальном размытии. Значение размытия используется в качестве ввода Feoffset и Fespecularling ниже.

Feoffset: этот шаг состоит в том, чтобы перевести изображение в некоторые позиции; Вход этого эффекта - размытие, генерируемое на предыдущем этапе, генерируя новый кешфур.

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

Два раза Fecomposite: эти два шага объединяют различные слои кэша.

Fecerge: Этот шаг состоит в том, чтобы объединить разные слои. Этот шаг, как правило, является последним шагом, объединяющим слои каждого кеша, генерируя окончательное изображение и отдавая его. Хотя этот шаг может быть завершен с помощью Fecomposite Special Effects несколько раз, он все еще не очень удобен в конце концов.

Элемент фильтра и область эффекта фильтра

Область эффекта фильтра относится к области, где работает эффект фильтра. Размер этой области определяется следующими свойствами элемента фильтра:

FilterUnits = userspaceonuse | Объект Boundingbox

Это свойство определяет пространство координат, используемое X, Y, шириной и высотой. Как и другие свойства, связанные с устройством, это свойство имеет два значения: userspaceonuse и объект Boundingbox (по умолчанию).

userspaceonuse представляет систему координат пользователя, которая использует элемент, который ссылается на элемент фильтра.

ObjectBoundingbox означает использование процента ограничивающего блока, которая ссылается на элемент фильтра в качестве диапазона значений.

x, y, ширина, высота

Эти свойства определяют прямоугольную область, где работает фильтр. Эффект фильтра не будет применен к точкам за пределами этой области. Значение по умолчанию x, y составляет -10%, а значение по умолчанию ширины и высоты составляет 120%.

Filterres

Это свойство определяет размер области промежуточного кеша, поэтому оно также определяет качество кэшированного изображения. Обычно это значение не требуется, и браузер выберет само соответствующее значение. Как правило, область эффекта фильтра должна быть определена, чтобы точно соответствовать ориентировочной точке и точку один за другим, что принесет определенные преимущества эффективности.

В дополнение к этим свойствам, также важны следующие свойства элемента фильтра:

PrimitityUnits = usersPaceonuse | Объект Boundingbox

Это свойство определяет пространство координат, используемое координатами и длиной в каждой атомной операции. Значением этого свойства является пользовательская точка и объектно -сайт. Но значение по умолчанию - userpaceonuse.

xlink: href = <iri>

Это свойство используется для обозначения других элементов фильтра в текущем элементе фильтра.

Стоит отметить, что элемент фильтра будет только унаследовать атрибуты своего родительского узла и не будет наследовать атрибуты элемента, который ссылается на элемент фильтра.

Обзор фильтра

Различные атомные операции фильтра не будут подробно описаны. Вы можете просто проверить официальные документы при необходимости. Давайте посмотрим на общие черты этих операций. За исключением атрибута, другие атрибуты ниже доступны для всех атомных операций.

x, y, ширина, высота

Я не скажу много об этих свойствах. Они определяют область, где работают атомы фильтра, поэтому она может стать области фильтра. Эти атрибуты ограничены области действия элемента фильтра. По умолчанию значения составляют 0, 0, 100% и 100% соответственно. Область действия этих атомов превышает область фильтра, не работает.

результат

Храните результаты этого шага. После определения результата другие последующие операции одного и того же элемента фильтра могут быть указаны как входные данные. Вы узнаете об этом, ссылаясь на пример выше. Если это значение опущено, оно может использоваться только в качестве неявного ввода для следующего следующего шага. Обратите внимание, что если следующий шаг уже указал вход в In, указанный на следующем шаге должен преобладать.

Указывает вход для этого шага. Если атрибут в IN опущен, результат предыдущего шага будет использоваться по умолчанию в качестве ввода этого шага. Если в шаге опущен, SourceGraphic будет использоваться в качестве значения (см. Описание ниже). Атрибут может относиться к значению, хранящемуся в предыдущем результате, или указать следующие 6 специальных значений :

SourceGraphic: это значение представляет вход для использования элемента текущего графика в качестве операции.

Sourcealpha: это значение представляет вход для использования альфа -значения текущего графика в качестве операции.

FounalImage: Это значение представляет собой использование текущего фона -скриншота в качестве входной работы для операции.

FounalAlpha: это значение представляет собой вход операции с использованием альфа -значения текущего фона экрана.

FillPaint: это значение использует значение атрибута заполнения текущего элемента графика в качестве входного в операции.

SCHEPPAINT: это значение использует значение текущего атрибута хода графического элемента в качестве входного ввода для операции.

Среди этих значений FackyImage и FounalAlpha могут быть трудно понять. Давайте посмотрим на эти два значения ниже.

Доступ фоновый скриншот

Обычно мы можем непосредственно использовать фона скриншот элемента, который ссылается на элемент фильтра как исходное изображение эффекта фильтра. Значения, представляющие этот вход, являются FounalImage и FounalAlpha, предыдущий содержит значения цвета и альфа, а второй содержит только альфа -значения. Чтобы поддержать это использование, также необходимо явно включить эту функцию на элементе, который ссылается на элемент фильтра, который требует установки свойства включенного защитника элемента.

Enable-Background = Accumulate | Новый [<x> <y> <sidth> <hight>] | наследовать

Это свойство может использоваться только для элементов контейнеров, и оно определяет, как сделать фоновые скриншоты.

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

Накопление является значением по умолчанию, и его эффект зависит от контекста: если родительский элемент контейнера использует Enable Background: New, то все графические элементы контейнера будут участвовать в рендеринге фона. В противном случае это означает, что родительский контейнер не готов сделать фоновый скриншот, а отображение графического элемента этого элемента отображается только на устройстве.

Следующий пример демонстрирует влияние этих значений:

xmlns = "http://www.w3.org/2000/svg" версия = "1.1">

<Title> Пример использования фоновых скриншотов </title>

<cesc> Следующие примеры объясняют использование фоновых скриншотов в разных ситуациях </desc>

<FEFS>

<filter id = "shiftbgandblur"

FilterUnits = "userpaceonuse" x = "0" y = "0">

<cesc> Этот фильтр отбрасывает исходное изображение, но использует фоновые скриншоты </desc>

</filter>

<filter id = "shiftbgandblur_withsourcegraphic"

FilterUnits = "userpaceonuse" x = "0" y = "0">

<Desc> Этот специальный эффект фильтра объединяет фоновые скриншоты и изображения текущего элемента </desc>

</femerge>

</filter>

</defs>

<CSCE> Первая картина - это эффект, не добавляя фильтр </desc>

</g>

</g>

<cesc> Вторая картина состоит в том, чтобы использовать эффекты фильтра на контейнере </desc>

</g>

</g>

<cesc> Третье изображение состоит в том, чтобы использовать эффект фильтра на внутреннем контейнере, обратить внимание на разницу со второй картинки </desc>

</g>

</g>

<CSCE> Четвертая картина состоит в том, чтобы использовать эффекты фильтра на графических элементах </desc>

<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"

Filter = "url (#shiftbgandblur)"/>

</g>

</g>

<cest> Пятая картина состоит в том, чтобы использовать различные эффекты фильтра на графических элементах </desc>

<Polygon Points = "160,25 160,125 240,75" Fill = "Blue"

Filter = "url (#shiftbgandblur_withsourcegraphic)"/>

</g>

</g>

</svg>

Визуализации следующие (первая ряд является окончательным визуализацией, а второй ряд - эффект фильтра):

Этот пример содержит 5 частей :

1. Фотографии в первой группе не используют никаких эффектов фильтра.

2. Вторая группа использует ту же картинку, но позволяет использовать фон.

3. Третья группа использует ту же картинку, но использует эффект фильтра во внутреннем контейнере.

4. Четвертая группа использует эффекты фильтра на элементы контейнера контента.

5. Последняя группа использует тот же эффект фильтра, что и четвертая группа, и объединяет исходное изображение.

Концепция фильтров на самом деле очень проста, но код для каждого эффекта выглядит более сложным. На самом деле, мы будем ясны после попытки этого. Однако, поскольку различные браузеры по -разному поддерживают SVG, специфический эффект должен быть предпринят самостоятельно перед его использованием.

Практическая ссылка

Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Центр разработки: https://developer.mozilla.org/en/svg

Популярная ссылка: http://www.chinasvg.com/

Официальный документ: http://www.w3.org/tr/svg11/