English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
Функция маски 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 (круг или прямоугольник) установлен на #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>Тестировать, смотреть‹/›
Эффект изображения после выполнения. Обратите внимание, что прямоугольник теперь полупрозрачный, и в нем нарисован кружок с помощью паттерна заливки, в других местах он полностью прозрачен.