HTML5 SVG 2D Введение 9 - Введение и применение масок и маски

SVG поддерживает различные эффекты маски. Используя эти функции, мы можем создать много ослепительных эффектов. Что касается того, называется ли маска маска или маска на китайском языке, она не дифференцирована. Здесь называется маска.

Типы масок, поддерживаемые SVG:

1. Переклонный путь

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

2. Маска/Маска

Маска - это контейнер, который определяет набор графики и использует их в качестве полупрозрачной среды, которую можно использовать для сочетания объектов и фонов переднего плана.

Важным отличием между пути отсечения и другими масками является то, что путь отсечения представляет собой 1-битную маску, что означает, что объект, покрытый пути отсечения, либо полностью прозрачен (видимый, расположенный внутри пути отсечения), либо совершенно непрозрачный (не виден, расположенный за пределами траектории отсечения). И маска может указать прозрачность в разных местах.

Атрибут переполнения и атрибут клипа элемента HTML совместно устанавливают поведение элемента подключения к контенту. Точно так же в SVG эти 2 свойства также могут быть использованы.

Атрибут переполнения определяет поведение, полученное, когда содержание элемента превышает границу элемента.

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

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

Скрытый: скрыть контент за пределами пути отсечения. Путь клипа указан свойством клипа.

Прокрутка: в виде полосы прокрутки, представляя контент за его пределами.

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

Это свойство в основном такое же, как и свойство одного имени в CSS2, за исключением того, что в SVG существуют различные процедуры обработки:

1. Атрибут переполнения не влияет на элементы, отличные от элементов, которые создают новое окно (SVG, символ, изображение, иностранное окт), шаблон и элементы маркера.

2. Путь отсечения соответствует окну. Если создано новое окно, создается новый путь отсечения. Путь вырезания по умолчанию - это граница окна.

Свойство клипа используется для установки пути клипа текущего окна.

Это свойство может использоваться для элементов (SVG, символ, изображение, иностранное окно), шаблон и маркерные элементы, которые могут создавать новые окна. Это свойство имеет те же параметры, что и свойство с тем же именем в CSS2. Авто означает, что путь отсечения согласуется с границей окон. При использовании графика в качестве параметра (установление значений вверху, вправо, внизу и слева от прямоугольника Crop) можно использовать значение координаты пользователя (то есть координаты без единиц). Например:

P {clip: rect (5px, 10px, 10px, 5px); }

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

Путь клипа определяется с использованием элемента Clippath, а затем ссылается с использованием атрибута Clip-Path.

Clippath может содержать элементы пути, текстовые элементы, основные графические элементы (круг и т. Д.) И использовать элементы. Если это элемент использования, он должен непосредственно обратиться к пути, тексту или основным графическим элементам, а другие элементы не могут быть направлены.

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

Для графических объектов путь клипа равен объединению пути клипа, установленного самим собой с путями клипа всех внешних элементов (включая пути клипа, установленные Clip-Path и Overflow). Несколько моментов, чтобы отметить:

1. Сам элемент Клиппата не наследует определенный Клиппат путь клипа от внешнего узла.

2. Сам элемент Clippath может установить атрибут Clip-Path. Эффект - это пересечение двух путей.

3. Атрибут Clip-Path может быть установлен для детских элементов элемента Clippath: эффект представляет собой союз двух путей.

4. Пустой путь отсечения будет разрезать все содержимое в элементе.

Вот несколько важных атрибутов:

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

Элемент Clippath никогда не отображается напрямую и ссылается через Clip-Path, поэтому настройка атрибута дисплея элемента Clippath не имеет никакого эффекта.

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

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

Ненулевая: алгоритм, используемый для этого значения, состоит в том, чтобы испускать линии из точки, которая будет оцениваться в любом направлении, а затем вычислить направление точки пересечения между рисунком и сегментом линий; Результат расчета начинается с 0, и каждый сегмент линии на пересечении находится слева направо, добавьте 1; Каждый сегмент линии на пересечении находится с справа налево, вычитайте 1; После расчета всех точек пересечения таким образом, если результат этого расчета не равен 0, точка находится на рисунке и должна быть заполнена; Если значение равно 0, оно не должно быть заполнено за пределами фигуры. См. Следующий пример:

Ровный: алгоритм, используемый для этого значения, состоит в том, чтобы испускать линии из точки, которые необходимо судить в любом направлении, а затем рассчитать количество точек, в которых пересекается фигура и сегмент линий. Если число нечетное, точка превращается в фигуру и должна быть заполнена; Если число равна, то, что выходит за рамки фигуры и не нужно заполнять. См. Пример на рисунке ниже:

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

<g>

<clippath id = "myclip">

<path d = "..." clip-rule = "ровнодд" />

</clippath>

<rect clip-path = "url (#myclip)" ... />

</g>

Это не работает, если элемент не в Клиппате. Например, следующие настройки не работают:

<g clip-rule = "nonzeo">

<clippath id = "myclip">

<path d = "..." />

</clippath>

<rect clip-path = "url (#myclip)" clip-rule = "ровнодд" ... />

</g>

Наконец, давайте посмотрим на небольшой пример пути отсечения:

<svg>

<g>

<clippath id = "myclip">

<Путь D = "M 10,10 L 10,20 L 20,20 L 20,10 Z" Клип-руле = "ровнодд" />

</clippath>

</g>

<rect clip-path = "url (#myclip)" x = "10" y = "10" fill = "red" />

</svg>

Виден только площадь верхнего левого угла прямоугольника.

В SVG вы можете назначить любой графический элемент или g -элемент в качестве маски для отображаемого объекта для объединения визуализированного объекта в фон.

Маска определяется элементом маски. При использовании маски вам нужно только ссылаться на маску в атрибуте Mask Mask.

Элемент маски может содержать любой графический элемент и элемент контейнера (например, G).

На самом деле, все ясны в отношении эффекта маски. По сути, это должно вычислить окончательную прозрачность на основе цвета и прозрачности каждой точки в маске. Затем при рендеринге объект слой маски с различной прозрачностью покрывается объектом, отражая маскирующий эффект маски. Для рендеринга объектов только части внутри маски будут отображаться в соответствии с прозрачностью точек на маске, а части за пределами маски не будут отображаться. См. Следующий пример:

<svg viewbox = "0 0 800 300" Версия = "1.1"

xmlns = "http://www.w3.org/2000/svg" xmlns: xlink = "http://www.w3.org/1999/xlink">

<FEFS>

<lineargradient id = "gradient" gradientunits = "userpaceonuse"

x1 = "0" y1 = "0" x2 = "800" y2 = "0">

<stop offset = "0" stop-color = "white" stop-opacity = "0" />

<stop offset = "1" stop-color = "white" stop-opacity = "1" />

</lineargradient>

<mask id = "mask" maskunits = "userpaceonuse"

x = "0" y = "0">

<rect x = "0" y = "0" fill = "url (#Gradient)" />

</маска>

<Text id = "text" x = "400" y = "200"

font-family = "verdana" font-size = "100" Text-Anchor = "Middle">

Маскированный текст

</text>

</defs>

<!-фон окна->

<rect x = "0" y = "0" fill = "#ff8080" />

<!- ​​Первый шаг- нарисовать текст с маской, и вы можете видеть, что эффект прозрачности маски был применен к словам.

Второй шаг -нарисовать текст без маски в качестве контура текста на первом шаге ->

<Использовать xlink: href = "#text" fill = "blue" mask = "url (#mask)" />

<Использовать xlink: href = "#text" fill = "none" rosck = "черный" with-width = "2" />

</svg>

Эффект показан на рисунке ниже:

Вы можете попытаться изменить ширину прямого элемента в приведенном выше элементе маски на 500. Вы увидите, что часть текста не отображается, поскольку эта часть превысила объем маски. Как вы можете видеть здесь, путь вырезки выше - это просто специальная маска (прозрачность каждой точки - либо 0, либо 1).

Определение и использование масок были введены. Давайте посмотрим на несколько важных атрибутов:

Система координат, которая определяет координаты (x, y) и длину (ширина, высота) в элементе маски: система координат пользователя, которая относится к элементу маски, или относительное значение ограничивающего ящика относительно элемента ссылочной маски. Значение этого значения совпадает с значением единицы в предыдущей главе.

Определяет систему координат детских элементов в элементе маски.

Положение и размер маски определены. В координатах объекта по умолчанию значения по умолчанию составляют -10%, -10%, 120%и 120%.

Индекс скрипта: 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/