Стань PHP-разработчиком с нуля с трудоустройством в IT-компании

Дерево навыков/Маски и обрезка/ SVG-маски и границы-маски

  1. Базовый уровень

    • SVG-маска

      Применяет SVG `<mask>` как источник маски элемента.

    • Источник границы-маски

      Назначает изображение для девятисегментной границы-маски.

  2. Продвинутый уровень

    • Регион SVG-маски

      Задаёт область действия SVG-маски через `x`, `y`, `width` и `height`.

    • `maskUnits`

      Выбирает систему координат региона SVG-маски.

    • `maskContentUnits`

      Выбирает систему координат содержимого SVG-маски.

    • Тип SVG-маски

      Задаёт предпочтительный alpha- или luminance-режим SVG `<mask>`.

    • Сегменты границы-маски

      Делит исходное изображение границы-маски на углы, края и центральную область.

    • Ширина границы-маски

      Задаёт ширину областей назначения независимо от обычной border width.

    • Вынос границы-маски

      Расширяет область границы-маски за пределы border box.

    • Повторение сегментов

      Выбирает растяжение, повторение, округление или распределение краевых сегментов.

    • Режим границы-маски

      Выбирает alpha- или luminance-интерпретацию изображения границы-маски.

    • Shorthand `mask-border`

      Собирает источник, slice, width, outset, repeat и mode в корректную shorthand-запись.

  3. Экспертный уровень

    • Наследование SVG-маски

      Определяет значения содержимого `<mask>` по его собственным предкам, а не по маскируемому элементу.

    • Граница рендеринга

      Отличает использование содержимого `<mask>` как offscreen mask source от его непосредственного отображения.

    • Nine-slice geometry

      Восстанавливает построение и масштабирование девяти исходных и девяти целевых областей границы-маски.

    • Слои маски и граница-маска

      Определяет совместный результат независимого последовательного применения mask layers и mask border.