Туториал по SVG

Элементы SVG

Элемент анимации SVG <Animation>Элемент SVG <clipPath>

Элемент SVG <mask>

Используя функцию маски SVG, вы можете применить маску к形状ам SVG. SVG маска - это более продвинутая версия контуров реза, которая определяет, какие части формы SVG видны и какова их прозрачность.

В SVG вы можете указать прозрачную маску и текущий объект для комбинирования, образуя фон. Прозрачная маска может быть любым другим графическим объектом или элементом <g> . Элемент mask используется для определения такой маски. Атрибут mask используется для ссылки на маску.

Онлайн пример

Создайте маску голубого прямоугольника

Пример

<svg　height="450"　width="450">
　<defs>
　　<mask　id="mask1"　x="0"　y="0"　width="100"　height="100"　>
　　　　<rect　x="0"　y="0"　width="100"　height="100"
　　　　　　　　style="stroke:none;　fill:　#ffffff"/>
　　</mask>
</defs>
<rect　x="1"　y="1"　width="200"　height="200"
　　　　style="stroke:　none;　fill:　#0000ff;　mask:　url(#mask1)"/>
</svg>

Проверьте, посмотри на‹/›

Эффект после выполнения:

Объяснение использования

Атрибут id элемента <mask> определяет уникальное имя маски.
Элемент <rect> в маске <mask> определяет форму маски.
Элемент <rect>属性的 style делает маску ID элемента маской CSS свойства.

Более онлайн примеров

Эффект текстового маскирования

Пример

<svg　width="200"　height="80"　
　　　　　viewBox="0　0　200　80"　version="1.1"
　　　　　xmlns="http://www.w3.org/2000/svg"　
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<defs>
　　　　　　　　<mask　id="myMask"　maskUnits="userSpaceOnUse">
　　　　　　　　　　　　　　x="0"　y="0"　width="200"　height="80">
　　　　　　　　　　　　<rect　x="0"　y="0"　width="100"　height="80"　fill="white"/>
　　　　　　　　</mask>
　　　　　　　　<text　id="Text"　x="100"　y="48">　
　　　　　　　　　　　　　　font-size="26"　font-weight="bold"　text-anchor="middle">
　　　　　　　　　　　　Черно & Белый
　　　　　　　　</text>
　　　　</defs>
　　　　<!-- Рисование черного прямоугольника на фоне-->
　　　　<rect x="100" y="10" width="95" height="60"></rect>
　　
　　　　<!-- Рисование текстовой строки дважды. Сначала, белый текст без маски. Затем, черно-белый текст с маской-->
　　　　<use xlink:href="#Text" fill="white"/></use>
　　　　<use xlink:href="#Text" fill="black" mask="url(#myMask)"/></use>
</svg>

Проверьте ‹/›

Эффект после выполнения:

Элемент анимации SVG <Animation>Элемент SVG <clipPath>