SVG => маскировать

Вступление

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

замечания

Помните, что маски - это дорогостоящая операция. Расчет должен выполняться для каждого пикселя в области маски. Поэтому держите область вашей маски как можно меньше.

основная маска

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="black"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

сложный пример с текстом и фигурами

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

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask0">
        <circle cx="50" cy="50" r="30" fill="white"/>
    </mask>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <text x="5" y="60" font-size="40">Mask</text>
        <circle cx="50" cy="50" r="30" fill="black"/>
        <text x="5" y="60" font-size="40" mask="url(#myMask0)" fill="white">Mask</text>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

полупрозрачность

зеленый прямоугольник (снова ...) с 4 отверстиями, созданными с использованием 4 оттенков серого, что приводит к 4 различным непрозрачности.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="25" cy="25" r="20" fill="black"/>
        <circle cx="75" cy="25" r="20" fill="#333"/>
        <circle cx="25" cy="75" r="20" fill="#666"/>
        <circle cx="75" cy="75" r="20" fill="#999"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

маска с градиентом

Зеленый прямоугольник с отверстием посередине, с мягкими краями.

<svg viewBox="0 0 100 100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <radialGradient id="rg">
      <stop offset="0" stop-color="black"/>
      <stop offset="1" stop-color="white"/>
    </radialGradient>
    <mask id="myMask">
        <rect x="0" y="0" width="100" height="100" fill="white"/>
        <circle cx="50" cy="50" r="45" fill="url(#rg)"/>
    </mask>
    <image xlink:href="https://cdn.pixabay.com/photo/2013/04/06/05/06/ship-100978_960_720.jpg" width="100" height="100"/>
    <rect x="0" y="0" width="100" height="100" fill="green" mask="url(#myMask)"/>
</svg>

Modified text is an extract of the original Stack Overflow Documentation

Лицензировано согласно CC BY-SA 3.0

Не связан с Stack Overflow

SVG
маскировать

Поиск…