English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

Курс SVG

Элементы SVG

Маска SVG (Mask)

Функция маски SVG позволяет применять маску к формам SVG. Маска определяет, какие части формы SVG видны и с какой степенью прозрачности. Вы можете рассматривать SVG маску как более сложную версию контурной линии.

Пример маски

Это пример простой маски:

<svg width="500" height="120">
<defs>
  <mask id="mask1" x="0" y="0" width="100" height="100" >
    <rect x="0" y="0" width="100" height="50"
        style="stroke:none; fill: #ffffff"/>
  </mask>
</defs>
<rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask1)"/>
  </svg>
Тестировать, смотреть‹/›

Этот пример использует маску с ID=mask1. Внутри элемента <mask> находится элемент <rect>. Именно этот элемент определяет форму маски.

Этот пример также определяет элемент <rect> с использованием маски.  Элемент <rect> использует атрибут style, который указывает на маску с помощью идентификатора маски.

Результат изображения после выполнения:

Обратите внимание, что высота отображаемого прямоугольника составляет 100 пикселей, но первые 50 вертикальных пикселей видны. Это связано с тем, что маска прямоугольника имеет высоту только 50 пикселей. Прямоугольник виден только в той части, которая покрыта маской.

Размер черного контурного прямоугольника равен размеру прямоугольника без маски.

Маски других форм

Вы можете использовать любую форму SVG в качестве маски. Это пример использования круга в качестве маски:

<svg>
  <defs>
    <mask id="mask2" x="0" y="0" width="100" height="100" >
      <circle cx="25" cy="25" r="25" style="stroke:none; fill: #ffffff"/>
    </mask>
  </defs>
  <rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask2)"/>
</svg>
Тестировать, смотреть‹/›

Результат изображения после выполнения:

Еще раз обратите внимание, что прямоугольник, маска которого видна, виден только в местеvisible маски circles.

Определение цвета shapes для определения прозрачности маски

До сих пор цвет заполнения shapes (круг или прямоугольник) установлен на #ffffff. Цвет shapes в маске определяет прозрачность shapes, используемых маской. Чем цвет shapes ближе к #ffffff (белый), тем менее прозрачным будет shape, используемый маской. Чем цвет shapes ближе к #000000 (черный), тем более прозрачным будет shape, используемый маской.

Это пример, в котором маска состоит из двух прямоугольников с различными цветами (#ffffff и #66666). Маска используется для одного прямоугольника, поэтому вы можете использовать маску, чтобы увидеть, как два различных shapes в маске влияют на один и тот же shape.

<svg width="500" height="120">
<defs>
  <mask id="mask3" x="0" y="0" width="100" height="100">
    <rect x="0" y="0" width="100" height="50"
          style="stroke:none; fill: #ffffff"/>
    <rect x="0" y="50" width="100" height="50"
          style="stroke:none; fill: #666666"/>
  </mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
    Этот текст находится под прямоугольником
</text>
<rect x="1" y="1" width="100" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask3)"/>
  </svg>
Тестировать, смотреть‹/›

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

Результат изображения после выполнения:

Этот текст находится под прямоугольником

Использование градиента в маске

Если применить градиент к形状у, используемому в маске, то можно получить градиентную прозрачность формы, применяемой маской.

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

<svg width="500" height="120">
<defs>
    <linearGradient id="gradient1"
                    x1="0%" y1="0%"
                    x2="100%" y2="0%"
                    spreadMethod="pad">
        <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
        <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
    </linearGradient>
    <mask id="mask4" x="0" y="0" width="200" height="100">
        <rect x="0" y="0" width="200" height="100"
            style="stroke:none; fill: url(#gradient1)"/>
    </mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
    Этот текст находится под прямоугольником
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask4)"/>
  </svg>
Тестировать, смотреть‹/›

Результат изображения после выполнения:

Этот текст находится под прямоугольником

Градиентная маска может быть использована вместе с другими эффектами (например, фоновым узором). Вот пример, где прямоугольник использует фоновый узор в качестве заливки и градиент в своей маске:

<svg width="500" height="120">
<defs>
  <linearGradient id="gradient2"
                x1="0%" y1="0%"
                x2="100%" y2="0%"
                spreadMethod="pad">
    <stop offset="0%" stop-color="#ffffff" stop-opacity="1"/>
    <stop offset="100%" stop-color="#000000" stop-opacity="1"/>
  </linearGradient>
  <pattern id="pattern2"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse">
    <circle cx="10" cy="10" r="10" style="stroke: none; fill: #0000ff; " />
  </pattern>
  <mask id="mask6" x="0" y="0" width="200" height="100">
      <rect x="0" y="0" width="200" height="100"
          style="stroke:none; fill: url(#gradient2)"/>
  </mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
    Этот текст находится под прямоугольником
</text>
<rect x="1" y="1" width="200" height="100"
      style="stroke: none; fill: url(#pattern2); mask: url(#mask6)"/>
  </svg>
Тестировать, смотреть‹/›

Обратите внимание, как прямоугольник ссылается на фоновый узор fill в своих CSS-атрибутах, а также как он ссылается на маску mask в своих CSS-атрибутах.

Эффект изображения после выполнения.

Этот текст находится под прямоугольником

Использование фона узора в маске

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

<svg width="500" height="120">
<defs>
  <pattern id="pattern1"
         x="10" y="10" width="20" height="20"
         patternUnits="userSpaceOnUse">
      <circle cx="10" cy="10" r="10" style="stroke: none; fill: #999999" />
  </pattern>
  <mask id="mask5" x="0" y="0" width="200" height="100">
    <rect x="0" y="0" width="200" height="100"
        style="stroke:none; fill: url(#pattern1)"/>
  </mask>
</defs>
<text x="10" y="55" style="stroke: none; fill: #000000;">
    Этот текст находится под прямоугольником
</text>
<rect x="1" y="1" width="200" height="100"
    style="stroke: none; fill: #0000ff; mask: url(#mask5)"/>
  </svg>
Тестировать, смотреть‹/›

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

Этот текст находится под прямоугольником