Маскирование в CSS


Содержание

CSS masking

В компьютерной графике обычно используются две операции clipping и masking. Обе операции скрывают визуальные части элемента. Если Вы работали с SVG или HTML5 Canvas , эти операции вероятно не новые для Вас.

Сlipping (отсечение) определяет область элемента, которая является видимой. Всё вокруг этой области не отсекается.

masking (маскировка) — комбинируется с элементом области, затрагивая алфа-канал этого элемента. Части скрытые под маской элемента, полностью или частично прозрачны. Новые спецификации CSS masking направлены для внедрения этих двух операций в мир HTML.

Clip в CSS 2.1

CSS 2.1 давно уже определил свойство clip . Но, у этого свойства есть ограничения, оно применяется только к элементам с абсолютной позицией ( position: absolute; ). Вот как это выглядит:

В SVG тоже свойство clip ограничено определенными элементами. Это одна из причин, почему в спецификацию SVG добавили свойство clip-path .

Свойство clip-path

clip-path может быть применено ко всем элементам HTML, SVG графических элементов и SVG элементам контейнера. Он может быть элементом ссылки или одной из основных форм в CSS Exclusions .

Элемент понимает SVG и использует его для разделения области. Графическими элементами в SVG являются , , ,

смотрите статью Руководство по HTML5 SVG . А также позволяет объединить несколько графических элементов. Использовать форму для отсечения области. В следующем примере показано использование :

Элементарные формы не требуют никакой разметки SVG. Они были добавлены в clip-path , для того чтобы мы могли использовать простые функции отсечения.

  • rectangle ( , , , , , ) определяет прямоугольник, добавляет два дополнительных параметра радиуса для rounded rects .
  • circle ( , , ) определяет простой круг с центральной точкой и радиусом.
  • ellipse( , , , ) определяет эллипс с центральной точкой, горизонтальный и вертикальный радиус.
  • polygon ( , , …, ) определяет многоугольник от переданного списка точек.

Разметка CSS может выглядеть следующим образом:

Отсечение может пригодится для отображения содержимого контента. В следующем примере к изображению, применены различные операции отсечения.

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

могут быть анимированы. Следующий пример имеет (звездообразную) форму.

Наведите курсор на изображение

Вот исходный код для анимации элементарной формы:

Masking

Вторая операция после отсечения это Masking (маскировка). Mask (маска) для изображения использует что то вроде (разноцветной сетки), фильтрует видимые части элемента. Дальше я объясню различие между, маски яркости и альфа-маской. Кто хорошо знаком с программой фотошоп, знают что это такое.

Маска яркости

Всё просто. Маски яркости удобный способ выделения конкретных тонов в изображении. Чем светлее часть изображения, тем больше скрыто элементов под маской. Например черный будет полностью прозрачный, белый указывает полностью непрозрачный, и серый тон указывает частичную прозрачность элемента изображения.

Альфа-маска

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

Изображение ниже — результат обеих операций маски, описанных выше.

Свойства mask

Свойство mask комбинирует masking изображения со ссылкой на mask следующим образом.

Первый способ состоит в использовании mask-image , mask-repeat , mask-position , mask-clip , mask-origin и mask-size свойства, которые определены подобные их встречной части background с background-image . Как и для фонового изображения, можно определить несколько источников маски.

Каждый источник маски изображения определен в CSS3 . Все источники маски будут объединены, чтобы сформировать отдельное изображение маски. Это изображение маски используется, чтобы маскировать элемент и его содержание как описано выше. Возможные значения изображений — любой формат изображения растрированный, как JPG или PNG, графические символы SVG, или предопределенные значения изображения как градиенты CSS.

Первый пример маски, может быть реализован просто с помощью следующего кода:

Если источник маски должен быть по размеру содержания, просто используйте обобщающее свойство mask , так, как если бы вы, делали это для background :

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

Пример:

Свойства mask-box-image

Свойства mask-box-image позволяет делить изображение маски на 9 неперекрывающих расположений: четыре угла, четыре грани и центральная часть. Эти части могут быть отсечены, масштабироваться и растягиваться по размеру области изображения маски. Свойство заимствует функциональные возможности от border-image и разрешает маску по граням и углам содержания. Следующий пример демонстрирует поведение свойства:

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

Изображения маски с mask-box-image

Поддержка браузеров

Все браузеры поддерживают clip , mask и clip-path , как указано в SVG 1.1 для SVG элементов. Но только один браузер позволяет применять свойства элементов HTML: Firefox (вроде). Давайте рассмотрим более подробно.

clip-path и свойства mask со ссылкой на и элементы работают в Firefox, оба свойства являются unprefixed. С другой стороны, mask-image , mask-box-image и связанных свойств с ними не поддерживаются вообще. Элементарные формы для отсечения не поддерживается.

Браузеры на основе WebKit, как, например, Safari и Chrome, имеют поддержку mask-image , mask-box-image изображений и соответствующих свойств. Всех их, можно применить к элементам HTML, так же оба браузера уже поддерживают префикс -webkit-clip-path для элементарных форм и ссылок .

Если вы хотите попробовать clip и mask , убедитесь, что вы используете префикс и свойства unprefixed. На данный момент свойства unprefixed должны использовать ссылку или .

Заключение

Будьте осторожны используя и в своих проектах, многие браузеры этих фильтров не понимают, или отображают не понятно как! Даже, всеми нами известный и (любимый) браузер IE10

Введение в CSS-фигуры

Долгое время веб-дизайнеры были ограничены в своём творчестве прямоугольными очертаниями. И по сей день, большая часть Всемирной паутины остаётся заключенной в простые прямоугольные рамки, так как большинство дизайнерских попыток выйти за эти рамки не выдержали проверку реальностью.

Но ситуация может измениться с введением новой спецификации CSS – фигур. CSS -фигуры впервые были реализованы в браузере Google Chrome версии 37.

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

Фигуры можно задавать вручную либо производить от рисунков.

Давайте рассмотрим создание фигур на простом примере.

Наверное, не я один был так наивен, впервые поместив на страницу изображение с прозрачным фоном в ожидании того, что контент заполнит прозрачные места. Представьте моё разочарование, когда этого не произошло, и очертания изображения остались прямоугольными! Но теперь у нас есть фигуры, и они помогут нам восстановить справедливость:

Директива shape-outside: url(image.png) говорит браузеру, чтобы он извлёк очертания фигуры из изображения.

Свойство shape-image-threshold задаёт минимальный уровень прозрачности, при котором пикселы будут участвовать в формировании фигуры. Значение этого свойства может изменяться в диапазоне от 0.0 ( полностью прозрачный ) до 1.0 ( полностью непрозрачный ).

В нашем примере shape-image-threshold: 0.5 означает, что только пикселы с прозрачностью 50% и меньше будут считаться составной частью фигуры.

Свойство float является ключевым. Поскольку директива shape-outside указывает браузеру на то, что фигура будет формироваться снаружи изображения, необходимо также указать, с какой стороны от изображения это должно происходить, иначе эффекта фигуры мы не увидим.

Плавающая область элемента строится в стороне, противоположной от указанной в свойстве float . Чашка кофе в нашем примере расположена слева, значит, контент будет огибать её по правому краю. Хотя прозрачные области могут быть заданы в любом месте рисунка, фигура может быть построена только справа либо слева, но никак не с обеих сторон.

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

Создание фигур вручную

Помимо извлечения фигур из прозрачных изображений, новое расширение CSS позволяет создавать фигуры вручную. Вы можете использовать функциональные атрибуты circle() , ellipse() , inset() и polygon() .

Каждая функция принимает в качестве параметров набор координат и функционирует в референсном блоке ( reference box ), задающем для фигуры начало координат. Мы ещё расскажем о референсных блоках чуть позже.

Функция circle()

Полная нотация ( то есть формат свойства ) для круга выглядит как circle(r at cx cy) , где r – радиус круга, а cx и cy – положение центра круга на осях координат. Координаты центра круга можно опустить; тогда круг будет выстроен относительно центра родительского блока:

В выше приведённом примере контент обтекает дугу. Параметр 50% задаёт радиус круга, который в данном случае составляет ровно половину высоты и ширины родительского элемента. Изменение размера этого элемента повлияет на размер фигуры. Это – простейший пример того, как сделать фигуру адаптивной.

Необходимо запомнить: CSS -фигуры задают только область обтекания вокруг элемента. Они не влияют на другие его свойства, например, на цвет фона. Чтобы обрезать фон, необходимо воспользоваться другим расширением CSS – маскированием.

К нему относятся свойства clip-path и mask-image . Последнее кажется особенно полезным, так как его нотация совпадает с нотацией CSS -фигур, и одни и те же параметры можно использовать дважды:

Далее в наших примерах мы будем использовать CSS -маскирование для большей наглядности.

Но вернёмся к нашим фигурам.

Когда мы задаём радиус круга в процентах, его размер на самом деле вычисляется по несколько более сложной формуле:

sqrt(width^2 + height^2) / sqrt(2)

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

Координаты для фигур могут быть заданы в любых единицах, допустимых в CSS : px , em , % и так далее. Вы можете выбрать ту единицу, которая будет отвечать вашим нуждам.

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

Позиция указывается относительно начала координат. Что это за координаты? Здесь уместно будет разъяснить понятие референсного блока.

Референсные блоки фигур CSS

Референсный блок – это виртуальный прямоугольник вокруг фигуры, который формирует систему координат для её отрисовки. За начало координат принимается верхний левый угол этого прямоугольника; при этом ось X направлена вниз, а Y – вправо:

Свойство shape-outside изменяет очертания области обтекания фигуры, вокруг которой будет располагаться контент. По умолчанию эта область у фигуры, как и у любого другого блока, распространяется вплоть до внешних краёв, заданных свойством margin .

Поэтому два ниже приведённых приёма приведут к одинаковым результатам:

Пока мы не задали элементу поля, мы можем рассчитывать на то, что начало координат и центр нашей фигуры находятся в одном и том же месте. С появлением полей всё меняется:

Начало координат теперь лежит вне родительского блока ( а точнее, на 100 пикселей выше и на 100 пикселей левее ). Там же расположен и центр круга. Вычисленное значение радиуса также выросло, принимая во внимание увеличение поверхности, охватываемое системой координат, заданной margin-box :

Можно выбрать свойство, задающее референсный блок, из нескольких вариантов: margin-box , border-box , padding-box и content-box . Их названия характеризуют очертания, по которым строится координатная сетка.

Что такое margin-box , мы уже знаем. border-box ограничен внешними краями рамки элемента, padding-box – заполнением, а content-box – поверхностью, которую занимает содержимое элемента:

В построении фигуры может участвовать только один референсный блок, только одна директива shape-outside . Разные типы референсных блоков могут влиять на фигуру особым, подчас не интуитивно понятным способом.

Функция ellipse()

Эллипс выглядит как сплющенный круг. Определение эллипса выглядит как ellipse(rx ry at cx cy) , где rx и ry – радиусы эллипса относительно осей X и Y , а cx и cy – координаты центра эллипса:

Процентные значения будут вычислены из размерности координатной системы. Никаких хитрых формул тут не будет. Координаты центра эллипса можно не указывать; в этом случае его центр будет помещён в середину референсного блока.

Радиусы также можно указать при помощи ключевых слов: farthest-side будет означать расстояние от центра эллипса до самой дальней стороны референсного блока, а closest-side , соответственно – до ближайшей стороны:

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

Эти же ключевые слова, кстати, могут быть использованы и при задании радиуса круга в функции circle() .

Функция polygon()

Если круги и эллипсы вам наскучили, функция создания многоугольной области наверняка займёт вас на более длительное время. Её формат: polygon(x1 y1, x2 y2, …) . В скобках вы должны задать пары координат для каждой вершины многоугольника. Минимальное количество пар – три, для треугольника:

Вершины отображаются на координатной сетке. Чтобы сделать наш многоугольник адаптивным, можно указать все или некоторые значения координат в процентах:

Есть также необязательный параметр fill-rule , заимствованный из SVG , который управляет тем, как браузер определяет, что является « внутренней » поверхностью многоугольника, если его грани пересекаются.

Этот вопрос отлично разъясняет Джони Трифл в своей статье « Как применяется правило заполнения в SVG ». Значение fill-rule по умолчанию: nonzero:

Функция inset()

Функция inset() позволяет создать прямоугольную область, которую будет обтекать контент. Это кажется странным, ведь фигуры CSS , как мы уже говорили, изначально были предназначены для того, чтобы задавать не прямоугольное расположение для содержимого блоков. И это на самом деле странно!

По крайней мере, я так и не смог придумать для этой функции такого применения, в котором её нельзя было бы заменить старым добрым плавающим блоком, не говоря уже о polygon() . Впрочем, inset() читается лучше, чем заменяющий её polygon() .

Полный формат функции описывается так: inset(top right bottom left border-radius) . Первые четыре параметра задают расположение фигуры в системе координат. Пятый задаёт виртуальную рамку для фигуры, причём этот параметр может быть, как развёрнут согласно принятой в CSS нотации для border-radius , так и пропущен как необязательный:

Создание фигур из референсных блоков

Если не указать аргумент-функцию в свойстве shape-outside , то браузер сам создаст фигуру на основе референсного блока. Референсным блоком по умолчанию является margin-box .

Пока ничего особенного, именно так до сих пор вели себя плавающие блоки. Но применение этой техники позволяет использовать очертания различных элементов. Для примера возьмём свойство border-radius .

Если вы используете это свойство для того, чтобы скруглить углы у плавающего элемента, это не изменит его область обтекания: она останется с острыми краями. А теперь добавьте, чтобы использовать для создания плавающей контентной области созданную нами форму:

Разумеется, таким образом вы можете использовать любой референсный блок. Вот ещё один пример креативного использования производных фигур для выделения цитат:

Такого эффекта можно достичь, используя только свойства float и margin . Только цитата в этом случае должна быть помещена именно в то место документа, где вы хотите её отобразить.

А так можно добиться того же визуального эффекта, но добавив гибкость в размещении цитаты:

Мы явно задали вид референсного блока и его положение в системе координат. В нашем случае объём цитаты определил фигуру, вокруг которой плавает основной контент. А свойство margin-top задало положение цитаты на странице независимо от её расположения в DOM -дереве.

Отступы фигуры

Обратите внимание, как близко плавающий контент примыкает к обтекаемому элементу. Добавить свободного пространства вокруг фигуры можно при помощи свойства shape-margin :

Эффект подобен тому, который можно получить при использовании свойства margin , но разница состоит в том, что shape-margin действует только внутри shape-outside . Он добавит отступ только в том случае, если тот поместится в референсный блок. Именно поэтому радиус фигуры в нашем последнем примере составляет 40, а не 50%.

Если бы радиус был установлен по максимуму, для отступа не хватило бы места. Вообще говоря, фигура всегда ограничивается своим margin-box , и при выходе за его пределы просто обрезается по форме прямоугольника.

Также важно учитывать, что свойство shape-margin принимает в качестве аргумента только одно положительное значение. Его нельзя развернуть, как обычный margin . И в самом деле, какой shape-margin-top может быть у круга?

Анимирование фигур

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

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

Вы можете анимировать радиусы и расположение кругов и эллипсов, если они представлены в величинах, которые браузер может интерполировать. Например, перейти от circle(30%) до circle(50%) у вас получится без проблем, но переход между farthest-side и closest-side загонит браузер в тупик:

Более интересные эффекты можно получить, анимируя многоугольники. Только учтите, что многоугольник должен иметь одинаковое число вершин во всех точках анимации. Браузер не поймёт вас, если вы решите добавить или убрать вершину « на лету ».

Зато вы можете помещать две и более вершины в одну точку, чтобы создать видимость того, что их число в ходе анимации меняется:

Создание обтекания внутри фигуры

Черновые спецификации CSS -фигур включали свойство shape-inside , которое позволяло использовать плавающий контент внутри фигуры. Некоторое время это свойство было реализовано в WebKit -браузерах и в Google Chrome .

Но заворачивание контента с произвольным внутренним позиционированием в произвольный наружный контур оказалось слишком сложно в реализации и вело к программным ошибкам. Поэтому свойство shape-inside было перенесено во второй уровень стандарта, а реализующий его код удалён из браузеров.

Тем не менее, упорство и компромисс помогут нам добиться эффекта плавающего контента внутри области произвольной формы. Трюк состоит в том, чтобы использовать две плавающих фигуры с shape-outside по обе стороны контейнера.

Компромисс – в нарушении семантики: нам придётся использовать два элемента без какого-либо определённого значения:

Положение подпорок ( .left-shape и .right-shape ) в самом начале контейнера имеет значение, так как они должны обогнуть содержимое по краям:

Такое решение позволяет подпоркам занять всё пространство контейнера, но свойство shape-outside выгрызет в них место для остального контента.

Если CSS -фигуры не поддерживаются браузером, вышеприведённый пример может давать странные побочные эффекты. Текст, скорее всего, окажется сдвинут к нижней части блока. Вот почему важно использовать новые свойства CSS в отказоустойчивой форме.

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

В « Алисе в Стране чудес » мы использовали позицию прокрутки, чтобы изменить верхнее поле контента. Контент оказывался зажатым между двумя плавающими элементами. Это создавало иллюзию того, что текст спускается в кроличью нору. Кому-то этот наворот покажется лишним, но на мой взгляд – круто.

Поскольку обработка положения элементов при использовании CSS -анимации происходит на более низком уровне, эти эффекты всегда выполняются быстрее, чем их JavaScript -аналоги.

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

Используйте динамические CSS -эффекты с осторожностью! Само же наличие в стилях CSS -фигур, без переходов и анимации, не оказывает какого-либо существенного влияния на скорость рендеринга.

Отказоустойчивость и последовательное улучшение

Начните работу над вёрсткой с предположения, что браузер не поддерживает модные CSS -расширения вроде фигур. Затем добавьте их обнаружение и обработку. Существует отличная библиотека для тестирования браузеров – Modernizr . Тест на поддержку фигур находится в дополнительной секции .

Некоторые браузеры, в том числе и Google Chrome , имеют встроенный механизм обнаружения функций – CSS -правило @supports . Вот как можно отказоустойчиво использовать это правило:

Леа Веру написала подробную статью об использовании правила @supports .

Неоднозначности в именовании CSS-расширений

То, что мы сегодня знаем как CSS -фигуры, когда-то называлось « CSS-исключения и фигуры ». Разница может показаться незначительной, но на самом деле она очень важна.

Илон Маск рекомендует:  Что такое код cpdf_setgray

CSS-исключения теперь представлены отдельной спецификацией и определяют обтекание блоков с абсолютным позиционированием без необходимости использовать свойство float . Как вы можете видеть, случаи использования фигур и исключений совершенно разные.

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

Инструменты для работы с CSS-фигурами

Существует множество графических редакторов, в которых можно спроектировать фигуры любой сложности, но ни один из них на сегодняшний момент не поддерживает экспорт в CSS . И даже если бы такой редактор существовал, работать в нём вряд ли имело бы смысл.

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

Brackets . Имеется расширение для этого замечательного текстового редактора, которое называется « CSS Shapes Editor ». Оно использует имеющийся в Brackets режим предварительного просмотра для интерактивного редактирования вершин.

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

Инспектор Google Chrome умеет выделять фигуры на странице. Наведите курсор на элемент, имеющий свойство shape-outside , и соответствующая фигура будет подсвечена.

Polyfill . Поддержка фигур была впервые реализована в браузере Google Chrome . В ближайшее время ожидается релиз Apple Safari 8 и iOS 8 с браузером, поддерживающим фигуры.

Другие браузеры также планируют включить этот функционал в свои продукты. А пока существует shapes-polyfill – реализация фигур для всех JavaScript-совместимых браузеров.

Заключение

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

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

Данная публикация представляет собой перевод статьи « Getting Started with CSS Shapes » , подготовленной дружной командой проекта Интернет-технологии.ру

Скошенные края блоков с помощью CSS-масок и трансформаций

С помощью угловатых, скошенных краев у различных html-элементов (картинок, блоков, целых секций) можно придать уникальный вид любой веб-странице. В этой статье мы рассмотрим практические примеры того, как легко можно добавить скошенные края любому html-элементу с помощью простых методик CSS-масок и CSS-трансформаций.

Чтобы создать углы для краев элементов с помощью CSS трансформаций обычно приходится «перекашивать» родительский элемент, а затем «отвязывать» дочерний элемент, но такой метод имеет ряд лишних ограничений. А что делать, если нужно применить более кастомизированный эффект: добавить скошенные углы только одному краю, например, только с правой стороны блока и от верхнего к нижнему краю? Оказывается, есть еще несколько способов для этого.

clip-path (маскирование, область отсечения) в CSS3

Первым и самым простым вариантом является использование CSS свойства clip-path . Пример кода:

Этот код присваивает обтравочную маску блоку и фактически скрывает его нижний край под небольшим углом (10 о ). Это довольно простой и рабочий метод. Единственным недостатком для свойства clip-path в CSS3 является поддержка браузерами. Полностью свойство поддерживает только Firefox, частично поддерживают Webkit-браузеры и полностью не поддерживают IE, Edge и Opera Mini.

Сгенерированный контент с помощью CSS3

Второй метод заключается в использовании сгенерированного (с помощью псевдоэлементов :after и :before ) и перекошенного содержимого. Этот метод отлично работает на блоках со сплошным фоновым цветом.

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

Чтобы добавить еще один скошенный край в верхней части элемента, достаточно добавить псевдоэлемент :before , перенеся его точку поворота в правый верхний угол и повернув блок на 5 градусов.

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

Самый скучный метод

Ну и третий, самый скучный метод – это создание фоновых картинок с прорисованными углами. Но никто так уже не делает в XXI веке (шутка).

Демо-пример 2-х рабочих методов придания скошенных углов блокам.

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

Маскирование в CSS

Всем привет! В данной статье мы познакомимся со свойством благодаря которому на изображение можно наложить маску. Поехали!

Допустим у нас дано изображение и мы хотим наложить на него маску.

Слева у нас основное изображение, а справа маска которую мы хотим наложить.

Для того чтобы наложить на изображение маску нам нужно воспользоваться свойством mask:

В результате наложения у нас получился такой интересный эффект.

Заметьте что при написании свойства mask я воспользовался вендорным префиксом webkit. Свойство несмотря на данный префикс поддерживается во всех современных браузерах включая Mozilla Firefox, Opera и т. д.

В качестве значения свойства mask мы указали путь до изображения маски. Здесь есть тоже один нюанс. Изображение маски должно поддерживать прозрачность. Именно полностью прозрачные участки на изображении маски в результате наследуются основным изображением и тоже становятся прозрачными. Если простыми словами то черные участки маски являются видимыми участками основного изображения, а прозрачные невидимыми. А если еще проще, используйте изображение масок в формате png.

Помимо пути мы указали еще значение no-repeat. То есть запретили клонирование масок по всему основному изображению.

Свойство mask может принимать такие же значение как свойство background:

К примеру здесь мы разместили нашу маску в правом нижнем углу основного изображения и запретили клонирование.

Бывает необходимость задать изображению маски размер.

Для этого существует свойство mask-size.

Здесь мы задали размер маски 200×200 пикселей.

Все свойства для работы с масками:

На этом дорогие друзья данная статья подошла к концу!

Не забывайте оставлять комментарии.

На этом я с вами прощаюсь! Желаю успехов и удачи! Пока!

Маскирование фонов CSS

Добрый день уважаемые. Подскажите как реализовать маскирование фонов в CSS ?

Необходимо добиться что б на выходе получить красный круг (5штук) с чёрным обводом. Эффект как-будто в диве с классом el дырка и через него просвечивает нижний фон. Я пробовал через clip-path но оно обрезает наружное, а мне надо то что внутри что б вырезало

А может попробовать маски для этой цели. Сделаем из круга маску и сквозь нее будем смотреть на подложку. В первом варианте у меня красный квадрат подложка, а во втором растровое изображение.

Теперь цветы. Фотка Yoksel и идеи её по использованию масок

Маскирование фонов

10.01.2020, 14:33

Несколько фонов в ie8
Как сделать несколько фонов с заданным расположением в ie8 ? вот такой: body <.

Синхронизация фонов с background-position
Задача создать 10 блоков, высотой в 100% и шириной в 10% у которых будет одна и та же картинка.

CSS Соединения двух фонов
Всем привет я новичек в css уже месяца 3 учю html, css, php. В Общем проблема такая у меня фон .

Ребят, выручайте. Накосячила с наложением фонов
Доброго времени суток! Только начала изучать html и css, у меня такая шляпа — при добавлении ссылок.

Несколько фонов с position fixed на странице
Хочу сделать несколько блоков с закрепленным фоном, пытался применить это свойство для блока, но.

10.01.2020, 19:03 2

А зачем вообще нужен .square?

Добавлено через 35 секунд
Почему не задать background-color: black для .circle?

Маскирование в CSS

Допустим, у нас есть набор иконок png чёрного цвета с прозрачностью. Как с помощью CSS реализовать возможность изменять цвет иконки произвольным образом? Тут нам на помощь придёт свежий стандарт CSS Masking.

Для достижения результата нужно наложить выбранную иконку в виде маски на фон с нужным цветом. Тогда атрибут прозрачности будет перенесён с иконки на фон.

Небольшая демонстрация. Ну ещё много интересного можно найти на html5rocks.

К сожалению, вся эта красота пока поддерживается только браузерами на основе WebKit, поэтому можно использовать в мобильных приложениях, но следует десять раз подумать перед тем, как включать данные свойства на обычном сайте. Лично для меня оно понадобилось, чтобы добавить растровые иконки к Sencha Touch.

Маскирование в CSS

Изучив рубрику «CSS», вы узнаете, как с помощью каскадных таблиц стилей (CSS) можно легко управлять дизайном сайта и упростить создание самого сайта. Данная рубрика заменит Вам полноценный «учебник по CSS».

Бесплатные уроки CSS для начинающих

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

Забавные эффекты для букв

Небольшой эффект с интерактивной анимацией букв.

Текст-маска при помощи CSS

Создание такой текст-маски при помощи CSS достаточно простое.

Поэкспериментировать с свойствами можно в демо примере, ссылку на который вы видите чуть ниже.

Обзор

Проголосуйте за урок

Оценка

Итог : Уважаемые читатели! Если вам понравилась статья не поленитесь проголосовать и оставить комментарий, ведь так я смогу понять полезность уроков и статей, и улучшить их качество в будущем. Заранее спасибо!

CSS Masking

W3C Working Draft 15 November 2012

Copyright © 2012 W3C ® (MIT , ERCIM , Keio), All Rights Reserved. W3C liability, trademark and document use rules apply.

Abstract

CSS Masking provides two means for partially or fully hiding portions of visual elements: masking and clipping.

Masking describes how to use another graphical element or image as a luminance or alpha mask. Typically, rendering an element via CSS or SVG can conceptually described as if the element, including its children, are drawn into a buffer and then that buffer is composited into the element’s parent. Luminance and alpha masks influence the transparency of this buffer before the compositing stage.

Clipping describes the visible region of visual elements. The region can be described by using certain SVG graphics elements or basic shapes. Anything outside of this region is not rendered.

Status of this document

This section describes the status of this document at the time of its publication. Other documents may supersede this document. A list of current W3C publications and the latest revision of this technical report can be found in the W3C technical reports index at http://www.w3.org/TR/.

Publication as a Working Draft does not imply endorsement by the W3C Membership. This is a draft document and may be updated, replaced or obsoleted by other documents at any time. It is inappropriate to cite this document as other than work in progress.

The (archived) public mailing list public-fx@w3.org (see instructions) is preferred for discussion of this specification. When sending e-mail, please put the text “css-masking” in the subject, preferably like this: “[ css-masking ] …summary of comment…

This document was produced by the CSS Working Group (part of the Style Activity) and the SVG Working Group (part of the Graphics Activity).

This document was produced by groups operating under the 5 February 2004 W3C Patent Policy. W3C maintains a public list of any patent disclosures (CSS) and a public list of any patent disclosures (SVG) made in connection with the deliverables of each group; these pages also include instructions for disclosing a patent. An individual who has actual knowledge of a patent which the individual believes contains Essential Claim(s) must disclose the information in accordance with section 6 of the W3C Patent Policy.

This is the first public Working Draft of css-masking.

Table of contents

1. Introduction

With CSS Masking it is possible to specify another graphics element, shape or file to be used as clipping region or an luminance or alpha mask for compositing the current object into the background.

A mask is applied using the ‘ mask ’, ‘ mask-image ’ or ‘ mask-box-image ’ properties. The mask source may be defined using a ‘ mask ’ element referenced by the ‘ mask ’ property. Alternatively, for many simple uses, the ‘ mask-image ’ property may refer directly to graphical elements or images to be used as mask forgoing the need for an explicit ‘ mask ’ element. The ‘ mask ’ property is also a shorthand for other masking properties. ‘ mask-box-image ’ splits a mask image into 9 pieces. The pieces may be sliced, scaled and stretched in various ways to fit the size of the mask image area.

The effect of applying a mask is as if the mask images or mask source elements are rendered into an off-screen image which has been initialized to transparent black. The graphical object to which the mask is applied will be painted onto the background through the mask, thus completely or partially masking out parts of the graphical object.

Clipping defines a visible region of a visual element. The region can be specified with SVG graphics element or basic shapes. Everything outs >

A luminance mask (middle) is applied on a shape filled with a gradient (left). This results in a masked shape (right).

2. Module interactions

This specification defines a set of CSS properties that affect the visual rendering of elements to which those properties are applied; these effects are applied after elements have been sized and positioned according to the Visual formatting model from [CSS21] . Some values of these properties result in the creation of a containing block, and/or the creation of a stacking context.

Definitions of CSS properties and values in this specification comply with CSS Backgrounds and Borders [CSS3BG] .

Some property and element definitions in this specification require an SVG 1.1 implementation [SVG11] . UAs without support for SVG must not implement the ‘ mask-type ’ and ‘ clip-rule ’ properties as well as the ‘ mask ’ and ‘ clipPath ’ elements. Furthermore, the ‘ mask ’ and ‘ clip-path ’ properties must not support references to ‘ mask ’ and ‘ clipPath ’ elements.

3. Values

This specification follows the CSS property definition conventions from [CSS21] . Value types not defined in this specification are defined in CSS Level 2 Revision 1 [CSS21] .

In addition to the property-specific values listed in their definitions, all properties defined in this specification also accept the inherit keyword as their property value. For readability it has not been repeated explicitly.

4. Definitions

When used in this specification, terms have the meanings assigned in this section.

The union of all border boxes for the element that has an associated CSS layout box and is not in the http://www.w3.org/2000/svg namespace and it’s descendant elements. Or the object bounding box [SVG11] , if the element does not have an associated CSS layout box and is in the http://www.w3.org/2000/svg namespace (See getBoundingClientRect [CSSOM-VIEW] ).

In general, a coordinate system defines locations and distances on the current canvas. The current local coordinate system (also user coordinate system) is the coordinate system that is currently active and which is used to define how coordinates and lengths are located and computed, respectively, on the current canvas [CSS3-TRANSFORMS] .

For elements that have an associated CSS layout box, the current user coordinate system has its origin at the top-left corner of the bounding client rect and one unit equals one CSS pixel. The viewport for resolving percentage values is defined by the width and height of the bounding client rect.

5. The Mask Rendering Model

The application of the ‘ clip-path ’, ‘ mask ’ or ‘ mask-image ’ properties to an element formatted with the CSS box model establishes a stacking context the same way that CSS ‘ opacity ’ does, and all the element’s descendants are rendered together as a group with the masking applied to the group as a whole.

The ‘ mask ’ and ‘ mask-image ’ properties have no effect on the geometry of the target element’s CSS boxes.

The compositing model follows the SVG compositing model [SVG11] : first any filter effect is applied, then any clipping, masking and opacity. These effects all apply after any other CSS effects such as ‘ border ’. As per SVG, the application of ‘ mask ’ or ‘ mask-image ’ has no effect on hit-testing.

5.1. Layering Multiple Mask Images

The mask of a box can have multiple layers . The number of layers is determined by the number of comma-separated values in the ‘ mask-image ’ property. Note that a value of ‘ none ’ still creates a layer.

Each of the images is sized, positioned, and tiled according to the corresponding value in the other mask properties. The lists are matched up from the first value: excess values at the end are not used. If a property doesn’t have enough comma-separated values to match the number of layers, the UA must calculate its used value by repeating the list of values until there are enough.

For example, this set of declarations:

has exactly the same effect as this set with the extra position dropped and the missing values for ‘ mask-origin ’ and ‘ mask-repeat ’ filled in (emphasized for clarity):

The first image in the list is the layer closest to the user, the next one is painted behind the first, and so on. All mask images are transformed to alpha masks (if necessary) and combined by compositing on the mask.

5.2. Calculating mask values

A mask may be interpreted using one of two different methods with regards to calculating the mask values that will be multiplied with the target alpha values.

The first and simplest method of calculating the mask values is to use the alpha channel of the mask source. In this case the mask value at a given point is simply the value of the alpha channel at that point. The color channels do not contribute to the mask value.

The second method of calculating the mask values is to use the luminance of the mask source. In this case the mask value at a given point is computed from the color channel values and alpha channel value using the following procedure.

  1. Compute a luminance value from the color channel values.
    • If the computed value of ‘ color-interpolation ’ on the ‘ mask ’ element is ‘ linearRGB ’, convert the original image color values (potentially in the sRGB color space) to the linear RGB color space.
    • Then, using non-premultiplied RGB color values, apply the luminance-to-alpha coefficients (as defined in the ‘ feColorMatrix ’ filter primitive [SVG11] ) to convert the RGB color values to luminance values.
  2. Multiply the computed luminance value by the corresponding alpha value to produce the mask value.

Regardless of the method used, the procedure for calculating mask values assumes the content of the mask is a four-channel RGBA graphics object. For other types of graphics objects, special handling is required as follows.

For a three-channel RGB graphics object that is used in a mask (e.g., when referencing a three-channel image file), the effect is as if the object were converted into a four-channel RGBA image with the alpha channel uniformly set to 1.

For a single-channel image that is used in a mask (e.g., when referencing a single-channel grayscale image file), the effect is as if the object were converted into a four-channel RGBA image, where the single channel from the referenced object is used to compute the three color channels and the alpha channel is uniformly set to 1. Note that when referencing a grayscale image file, the transfer curve relating the encoded grayscale values to linear light values must be taken into account when computing the color channels.

Note that SVG graphics elements (e.g., ‘ circle ’ or ‘ text ’) are all treated as four-channel RGBA images for the purposes of masking operations.

The effect of a mask is >6. Mask

6.1. The ‘ mask-image ’ property

Name:
Value: #
Initial: none
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified, but with URIs made absolute
Animatable: no

This property sets the mask image(s) of an element. Images are drawn with the first specified one on top (closest to the user) and each subsequent image behind the previous one. Where: A 2D image. (See [CSS3-IMAGES] .) A value of ‘ alpha ’ indicates that the alpha values of the mask image should be used as the mask values. See Calculating mask values. A value of ‘ luminance ’ indicates that the luminance values of the mask image should be used as the mask values. See Calculating mask values. A value of ‘ none ’ counts as an image layer but does not mask the element.

If neither ‘ luminance ’ or ‘ alpha ’ is specified, a value of ‘ alpha ’ is used.

A mask image that is empty (zero width or zero height), that fails to download, is non-existent, or that cannot be displayed (e.g. because it is not in a supported image format) is ignored. No masking is applied.

See the section “Layering multiple mask images” for how ‘ mask-image ’ interacts with other comma-separated mask properties to form each mask image layer.

Media fragments can be used to use a portion of an image as a mask. The CSS Images module will prov >

Some examples specifying mask images:

6.2. The ‘ mask-repeat ’ property

Name:
Value: #
Initial: repeat
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: A list, each item consisting of: two keywords, one per dimension
Animatable: no

Specifies how mask images are tiled after they have been sized and positioned. Where

Single values for have the following meanings: Computes to ‘ repeat no-repeat ’. Computes to ‘ no-repeat repeat ’. ‘ repeat ’ Computes to ‘ repeat repeat ’. ‘ space ’ Computes to ‘ space space ’ ‘ round ’ Computes to ‘ round round ’ ‘ no-repeat ’ Computes to ‘ no-repeat no-repeat ’

If a value has two keywords, the first one is for the horizontal direction, the second for the vertical one, as follows: The image is repeated in this direction as often as needed to cover the mask painting area. The image is repeated as often as will fit within the mask painting area without being clipped and then the images are spaced out to fill the area. The first and last images touch the edges of the area. If the mask painting area is larger than the mask positioning area, then the pattern repeats to fill the mask painting area. The value of ‘ mask-position ’ for this direction is ignored, unless there is not enough space for two copies of the image in this direction, in which case only one image is placed and ‘ mask-position ’ determines its position in this direction. The image is repeated as often as will fit within the mask painting area. If it doesn’t fit a whole number of times, it is rescaled so that it does. See the formula under ‘ mask-size ’. If the mask painting area is larger than the mask positioning area, then the pattern repeats to fill the mask painting area. The image is placed once and not repeated in this direction.

Unless one of the two keywords is ‘ no-repeat ’, the whole mask painting area will be tiled, i.e., not just one vertical strip and one horizontal strip.

The effect of ‘ space ’: the mask image of a dot is tiled to cover the whole mask painting area and the mask images are equally spaced.

See the section “Layering multiple mask images” for how ‘ mask-repeat ’ interacts with other comma-separated mask properties to form each mask image layer.

6.3. The ‘ mask-position ’ property

#

Initial: 0% 0% Applies to: All elements. In SVG, it applies to container elements and graphics elements Inherited: no Percentages: refer to size of mask painting area minus size of mask image; see text Media: visual Computed value: A list, each item consisting of: two keywords representing the origin and two offsets from that origin, each given as an absolute length (if given a ), otherwise as a percentage. Animatable: yes

If mask images have been specified, this property specifies their initial position (after any resizing) within their corresponding mask painting area.

If only one value is specified, the second value is assumed to be ‘ center ’. If two values are given, a length or percentage as the first value represents the horizontal position (or offset) and a length or percentage as the second value represents the vertical position (or offset).

and values here represent an offset of the top left corner of the mask image from the top left corner of the mask painting area.

Note that a pair of keywords can be reordered while a combination of keyword and length or percentage cannot. So ‘ center left ’ is val >50% left ’ is not.

If three or four values are given, then each

or represents an offset and must be preceded by a keyword, which specifies from which edge the offset is given. For example, ‘ mask-position: bottom 10px right 20px ’ represents a ‘ 10px ’ vertical offset up from the bottom edge and a ‘ 20px ’ horizontal offset leftward from the right edge. If three values are given, the missing offset is assumed to be zero.

Positive values represent an offset inward from the edge of the mask painting area. Negative values represent an offset outward from the edge of the mask painting area.

The following declarations give the stated (horizontal, vertical) offsets from the top left corner:

A percentage for the horizontal offset is relative to ( width of mask painting area — width of mask image ). A percentage for the vertical offset is relative to ( height of mask painting area — height of mask image ), where the size of the image is the size given by ‘ mask-size ’.

For example, with a value pair of ‘ 0% 0% ’, the upper left corner of the image is aligned with the upper left corner of, usually, the box’s padding edge. A value pair of ‘ 100% 100% ’ places the lower right corner of the image in the lower right corner of the area. With a value pair of ‘ 75% 50% ’, the point 75% across and 50% down the image is to be placed at the point 75% across and 50% down the area.

Diagram of the meaning of ‘ mask-position: 75% 50% ’.

The following ‘ mask ’ shorthand declarations use keywords to set ‘ mask-position ’ to the stated percentage values.

In the example below, the (single) image is placed in the lower-right corner of the viewport.

Mask positions can also be relative to other corners than the top left. E.g., the following puts the background image 10px from the bottom and 3em from the right:

See the section “Layering multiple mask images” for how ‘ mask-position ’ interacts with other comma-separated mask properties to form each mask image layer.

6.4. The ‘ mask-clip ’ property

Name:
Value: #
Initial: border-box
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no

Determines the , which determines the area that is affected by the mask. The painted content of an element may be resricted to this area. The syntax of the property is given with

Values have the following meanings: The painted content is rectricted to (clipped to) the border box respectively painting box for objects without associated layout box. The painted content is rectricted to (clipped to) the padding box.

respectively object bounding box [SVG11] for objects without associated layout box. The painted content is rectricted to (clipped to) the content box. The painted content is not restricted (not clipped). The mask painting area is set to the bounding client rect.

Note that there is no corresponding box for ‘ padding-box ’ on objects without associated layout box and ‘ content-box ’ is choosen instead.

See the section “Layering multiple mask images” for how ‘ mask-clip ’ interacts with other comma-separated mask properties to form each mask image layer.

6.5. The ‘ mask-origin ’ property

Name:
Value: #
Initial: padding-box
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no

For elements rendered as a single box, specifies the . For elements rendered as multiple boxes (e.g., inline boxes on several lines, boxes on several pages) specifies which boxes ‘ box-decoration-break ’ operates on to determine the mask positioning area(s). The position is relative to the padding box. (For single boxes ‘ 0 0 ’ is the upper left corner of the padding edge, ‘ 100% 100% ’ is the lower right corner.) The position is relative to the border box respectively painting box for objects without associated layout box. The position is relative to the content box respectively object bounding box [SVG11] for objects without associated layout box.

Note that there is no corresponding box for ‘ padding-box ’ on objects without associated layout box and ‘ content-box ’ is choosen instead.

Note that if ‘ mask-clip ’ is ‘ padding-box ’, ‘ mask-origin ’ is ‘ border-box ’, ‘ mask-position ’ is ‘ top left ’ (the initial value), and the element has a non-zero border, then the top and left of the mask image will be clipped.

See the section “Layering multiple mask images” for how ‘ mask-origin ’ interacts with other comma-separated mask properties to form each mask image layer.

Needs to be resolved where the origin for ‘ mask-clip: none ’ should be.

6.6. The ‘ mask-size ’ property

Name:
Value: #
Initial: auto
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: see text
Media: visual
Computed value: as specified, but with lengths made absolute
Animatable: yes except keyword values

Specifies the size of the mask images. Where

Values have the following meanings: Scale the image, while preserving its intrinsic aspect ratio (if any), to the largest size such that both its width and its height can fit inside the mask positioning area. Scale the image, while preserving its intrinsic aspect ratio (if any), to the smallest size such that both its width and its height can completely cover the mask positioning area. [ |

The first value gives the w >auto ’.

A percentage is relative to the background positioning area.

An ‘ auto ’ value for one dimension is resolved by using the image’s intrinsic ratio and the size of the other dimension, or failing that, using the image’s intrinsic size, or failing that, treating it as 100%.

Negative values are not allowed.

Here are some examples. The first example stretches the mask image independently in both dimensions to completely cover the content area:

The second example stretches the image so that exactly two copies fit horizontally. The aspect ratio is preserved:

This example forces the mask image to be 15 by 15 pixels:

This example uses the image’s intrinsic size. Note that this is the only possible behavior in CSS level 1 and 2.

The following example rounds the height of the image to 33.3%, up from the specified value of 30%. At 30%, three images would fit entirely and a fourth only partially. After rounding, three images fit. The width of the image is 20% of the mask area width and is not rounded.

If ‘ mask-repeat ’ is ‘ round ’ for one (or both) dimensions, there is a second step. The UA must scale the image in that dimension (or both dimensions) so that it fits a whole number of times in the mask positioning area. In the case of the width (height is analogous):

If X ≠ 0 is the width of the image after step one and W is the width of the mask positioning area, then the rounded width X’ = W / round( W / X ) where round() is a function that returns the nearest natural number (integer greater than zero).

If ‘ mask-repeat ’ is ‘ round ’ for one dimension only and if ‘ mask-size ’ is ‘ auto ’ for the other dimension, then there is a third step: that other dimension is scaled so that the original aspect ratio is restored.

In this example the mask image is shown at its intrinsic size:

In the following example, the mask is shown with a width of 3em and its height is scaled proportionally to keep the original aspect ratio:

In the following example, the mask is shown with a width of approximately 3em: scaled so that it fits a whole number of times in the width of the mask. The height is scaled proportionally to keep the original aspect ratio:

In the following example, the mask image is shown with a width of 3em and a height that is either the height corresponding to that width at the original aspect ratio or slightly less:

In the following example, the mask image is shown with a height of approximately 4em: scaled slightly so that it fits a whole number of times in the mask height. The width is the approximately the width that correspond to a 4em height at the original aspect ratio: scaled slightly so that it fits a whole number of times in the mask width.

If the mask image’s width or height resolves to zero, this causes the image not to be displayed. (The effect is the same as if it had been a transparent image.)

See the section “Layering multiple mask images” for how ‘ mask-size ’ interacts with other comma-separated mask properties to form each mask image layer.

6.7. The ‘ mask ’ property

Name:
Value: | #
Initial: see individual properties
Applies to: All elements. In SVG, it applies to container elements and graphics elements
Inherited: no
Percentages: see individual properties
Media: visual
Computed value: see individual properties
Animatable: see individual properties

Currently Mozilla needs to differ between CSS Image and Mask resource right after parsing and before loading the resource. This is not possible with the current ‘ mask ’ property definition. A URL reference to a ‘ mask ’ element. For example ‘ url(commonmasks.xml#mask) ’. A keyword to indicate that the last child ‘ mask ’ element should be used as the mask source. It is equivalent to ‘ select(mask:last-of-type) ’. A comma-separated list of compound selectors scoped at the element to which the ‘ mask ’ property is applied. The first matching element in tree order (as defined in [DOM] ) as a result of evaluating the list of selectors is taken as the mask source. If there are no matching elements the mask source is invalid. A compound selector as defined in [SELECTORS4] . ‘ alpha ’ A value of ‘ alpha ’ indicates that the alpha values of the mask content of the referenced mask element should be used as the mask values. See Calculating mask values. ‘ luminance ’ A value of ‘ luminance ’ indicates that the luminance values of the mask content of the referenced mask element should be used as the mask values. See Calculating mask values.

An inval > Note that the properties ‘ mask-image ’, ‘ mask-repeat ’, ‘ mask-position ’, ‘ mask-clip ’, ‘ mask-origin ’ and ‘ mask-size ’ have no affect on ‘ mask ’ elements.

6.8. The ‘ mask-type ’ property

Name:
Value: luminance | alpha
Initial: luminance
Applies to: ‘ mask ’ elements
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: yes except keyword values

The ‘ mask-type ’ property defines whether the content of the ‘ mask ’ is treated as as luminance mask or alpha mask, as described in Calculating mask values.

Values have the following meanings: ‘ luminance ’ Indicates that the luminance values of the mask should be used. ‘ alpha ’ Indicates that the alpha values of the mask should be used.

The ‘ mask-type ’ property is a presentation attribute for SVG elements.

6.9. The ‘ mask ’ element

Name:
Categories: Container element
Content model: Any number of the following elements, in any order:
  • animation — ‘animate’ , ‘animateColor’ , ‘animateMotion’ , ‘animateTransform’ , ‘set’
  • descriptive — ‘desc’ , ‘title’ , ‘metadata’
  • shape — ‘circle’ , ‘ellipse’ , ‘line’ , ‘path’ , ‘polygon’ , ‘polyline’ , ‘rect’
  • structural — ‘defs’ , ‘g’ , ‘svg’ , ‘symbol’ , ‘use’
  • gradient — ‘linearGradient’ , ‘radialGradient’
  • ‘a’
  • ‘clipPath’
  • ‘color-profile’
  • ‘cursor’
  • ‘filter’
  • ‘font’
  • ‘font-face’
  • ‘foreignObject’
  • ‘image’
  • ‘marker’
  • ‘mask’
  • ‘pattern’
  • ‘script’
  • ‘style’
  • ‘switch’
  • ‘view’
  • ‘text’
  • ‘altGlyphDef’
Attributes:
  • conditional processing attributes — ‘requiredFeatures’ , ‘requiredExtensions’ , ‘systemLanguage’
  • core attributes — ‘id’ , ‘xml:base’ , ‘xml:lang’ , ‘xml:space’
  • presentation attributes — ‘alignment-baseline’ , ‘baseline-shift’ , ‘clip’ , ‘clip-path’ , ‘clip-rule’ , ‘color’ , ‘color-interpolation’ , ‘color-interpolation-filters’ , ‘color-profile’ , ‘color-rendering’ , ‘cursor’ , ‘direction’ , ‘display’ , ‘dominant-baseline’ , ‘enable-background’ , ‘fill’ , ‘fill-opacity’ , ‘fill-rule’ , ‘filter’ , ‘flood-color’ , ‘flood-opacity’ , ‘font’ , ‘font-family’ , ‘font-size’ , ‘font-size-adjust’ , ‘font-stretch’ , ‘font-style’ , ‘font-variant’ , ‘font-weight’ , ‘glyph-orientation-horizontal’ , ‘glyph-orientation-vertical’ , ‘image-rendering’ , ‘kerning’ , ‘letter-spacing’ , ‘lighting-color’ , ‘marker’ , ‘marker-end’ , ‘marker-mid’ , ‘marker-start’ , ‘mask’ , ‘opacity’ , ‘overflow’ , ‘pointer-events’ , ‘shape-rendering’ , ‘stop-color’ , ‘stop-opacity’ , ‘stroke’ , ‘stroke-dasharray’ , ‘stroke-dashoffset’ , ‘stroke-linecap’ , ‘stroke-linejoin’ , ‘stroke-miterlimit’ , ‘stroke-opacity’ , ‘stroke-width’ , ‘text-anchor’ , ‘text-decoration’ , ‘text-rendering’ , ‘unicode-bidi’ , ‘visibility’ , ‘word-spacing’ , ‘writing-mode’
  • ‘class’
  • ‘style’
  • ‘x’
  • ‘y’
  • ‘width’
  • ‘height’
  • ‘maskUnits’
  • ‘maskContentUnits’
DOM Interfaces: SVGMaskElement

Attribute definitions: maskUnits = «userSpaceOnUse | objectBoundingBox» Defines the coordinate system for attributes ‘ x ’, ‘ y ’, ‘ width ’ and ‘ height ’.
If maskUnits=»userSpaceOnUse» , ‘ x ’, ‘ y ’, ‘ width ’ and ‘ height ’ represent values in the current user coordinate system in place at the time when the ‘ mask ’ element is referenced (i.e., the user coordinate system for the element referencing the ‘ mask ’ element via the ‘ mask ’ property).
If maskUnits=»objectBoundingBox» , ‘ x ’, ‘ y ’, ‘ width ’ and ‘ height ’ represent fractions or percentages of the bounding box of the element to which the mask is applied. (See object bounding box units.)
If attribute ‘ maskUnits ’ is not specified, then the effect is as if a value of ‘ objectBoundingBox ’ were specified.
Animatable: yes. maskContentUnits = «userSpaceOnUse | objectBoundingBox» Defines the coordinate system for the contents of the ‘ mask ’.
If maskContentUnits=»userSpaceOnUse» , the user coordinate system for the contents of the ‘ mask ’ element is the current user coordinate system in place at the time when the ‘ mask ’ element is referenced (i.e., the user coordinate system for the element referencing the ‘ mask ’ element via the ‘ mask ’ property).
If maskContentUnits=»objectBoundingBox» , the user coordinate system for the contents of the ‘ mask ’ is established using the bounding box of the element to which the mask is applied. (See object bounding box units.)
If attribute ‘ maskContentUnits ’ is not specified, then the effect is as if a value of ‘ userSpaceOnUse ’ were specified.
Animatable: yes. x = » |

» The x-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer. Note that the clipping path used to render any graphics within the mask will consist of the intersection of the current clipping path associated with the given object and the rectangle defined by ‘ x ’, ‘ y ’, ‘ width ’ and ‘ height ’.
If the attribute is not specified, the effect is as if a value of ‘ -10% ’ were specified.
Animatable: yes. y = » |

» The y-axis coordinate of one corner of the rectangle for the largest possible offscreen buffer.
If the attribute is not specified, the effect is as if a value of ‘ -10% ’ were specified.
Animatable: yes. width = » |

» The w >x ’, ‘ y ’, ‘ width ’ and ‘ height ’.
A negative value or a value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of ‘ 120% ’ were specified.
Animatable: yes. height = » |

» The height of the largest possible offscreen buffer.
A negative value or a value of zero disables rendering of the element.
If the attribute is not specified, the effect is as if a value of ‘ 120% ’ were specified.
Animatable: yes.

CSS properties inherit into the ‘ mask ’ element from its ancestors; properties do not inherit from the element referencing the ‘ mask ’ element.

‘ mask ’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘ mask ’ property. The ‘ opacity ’, ‘ filter ’ and ‘ display ’ properties do not apply to the ‘ mask ’ element; thus, ‘ mask ’ elements are not directly rendered even if the ‘ display ’ property is set to a value other than ‘ none ’, and ‘ mask ’ elements are available for referencing even when the ‘ display ’ property on the ‘ mask ’ element or any of its ancestors is set to none.

7. Mask Box Image

With ‘ mask-box-image ’ a mask can be split into nine pieces: four corners, four edges and the m >

Pieces of a mask box image.

These pieces may be sliced, scaled and stretched in various ways to fit the size of the mask image area .

The mask image in the following example is split into four corners with dimensions of 75 pixels, four edges and the m >

Example for ‘ mask-box-image ’. The object on the left is the object to mask. The second image is the alpha mask and the last image the masked object.

7.1. The ‘ mask-box-image-source ’ property

Name:
Value:
Initial: none
Applies to: All elements. In SVG, it applies to container elements and graphics elements.
Inherited: no
Percentages: N/A
Media: visual
Computed value: ‘ none ’ or the image with its URI made absolute
Animatable: no

Specifies an image to be used as mask. If the value is ‘ none ’ or if the image cannot be displayed (or the property doesn’t apply), the content won’t get masked.

7.2. The ‘ mask-box-image-slice ’ property

] <1,4>&& fill?

Initial: 0 fill Applies to: All elements. In SVG, it applies to container elements and graphics elements. Inherited: no Percentages: refer to size of the mask image Media: visual Computed value: as specified Animatable: no

When four values are specified, they set the offsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

Percentages are relative to the size of the mask image: the width of the image for the horizontal offsets, the height for vertical offsets. Numbers represent pixels in the mask image (if the image is a raster image) or vector coordinates (if the image is a vector image). The ‘ fill ’ keyword, if present, causes the middle part of the mask image to be preserved. (By default it is discarded, i.e., treated as transparent black.)

Negative values are not allowed and values bigger than the size of the image are interpreted as ‘ 100% ’.

The regions given by the ‘ mask-box-image-slice ’ values may overlap. However if the sum of the right and left widths is equal to or greater than the width of the image, the images for the top and bottom edge and the middle part are empty, which has the same effect as if a nonempty transparent image had been specified for those parts. Analogously for the top and bottom values.

If the image must be sized to determine the slices (for example, for SVG images with no intrinsic size), then it is sized as for an auto-sized background, using the mask box image area as the default object size in place of the mask positioning area.

Diagram illustrating the cuts corresponding to the value ‘ 25% 30% 12% 20% ’

7.3. The ‘ mask-box-image-width ’ property

| | auto ] <1,4>

Initial: auto Applies to: All elements. In SVG, it applies to container elements and graphics elements. Inherited: no Percentages: relative to width/height of the mask box image area Media: visual Computed value: all s made absolute, otherwise as specified Animatable: no

The four values of ‘ mask-box-image-width ’ specify offsets that are used to divide the mask box image area into nine parts. They represent inward distances from the the top, right, bottom, and left sides of the area, respectively. If the left width is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top. Values have the following meanings:

Note that for SVG elements without an associated layout box the ‘ border-width ’ is cons >0 ’.

Negative values are not allowed for any ‘ mask-box-image-width ’ values.

If two opposite ‘ mask-box-image-width ’ offsets are large enough that they overlap, then the used values of all ‘ mask-box-image-width ’ offsets are proportionally reduced until they no longer overlap. In mathematical notation: Given Lwidth as the width of the mask box image area, Lheight as its height, and W side as the mask image width offset for the side side, let f = min( Lwidth /( Wleft + Wright ), Lheight /( Wtop + Wbottom )). If f W are reduced by multiplying them by f .

7.4. The ‘ mask-box-image-outset ’ property

Name:
Value: [ | ] <1,4>
Initial: 0
Applies to: All elements. In SVG, it applies to container elements and graphics elements.
Inherited: no
Percentages: N/A
Media: visual
Computed value: all s made absolute, otherwise as specified
Animatable: no

The values specify the amount by which the extends beyond the border box. If it has four values, they set the outsets on the top, right, bottom and left sides in that order. If the left is missing, it is the same as the right; if the bottom is missing, it is the same as the top; if the right is missing, it is the same as the top.

As with ‘ mask-box-image-width ’, a represents a multiple of the corresponding ‘ border-width ’. Negative values are not allowed for any of the ‘ mask-box-image-outset ’ values.

Note that for SVG elements without associated layout box the ‘ border-width ’ is cons >0 ’.

7.5. The ‘ mask-box-image-repeat ’ property

Name:
Value: [ stretch | repeat | round | space ] <1,2>
Initial: stretch
Applies to: All elements. In SVG, it applies to container elements and graphics elements.
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: no

This property specifies how the images for the sides and the middle part of the mask image are scaled and tiled. The first keyword applies to the horizontal sides, the second to the vertical ones. If the second keyword is absent, it is assumed to be the same as the first. Values have the following meanings: The image is stretched to fill the area. The image is tiled (repeated) to fill the area. The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the image is rescaled so that it does. The image is tiled (repeated) to fill the area. If it does not fill the area with a whole number of tiles, the extra space is distributed around the tiles.

7.6. The ‘ mask-box-image ’ property

Name:
Value: mask-box-image-source ’> || mask-box-image-slice ’> [ / mask-box-image-width ’> | / mask-box-image-width ’> ? / mask-box-image-outset ’> ]? || mask-box-image-repeat ’>
Initial: See individual properties
Applies to: See individual properties
Inherited: no
Percentages: N/A
Media: visual
Computed value: See individual properties
Animatable: See individual properties

This is a shorthand property for setting ‘ mask-box-image-source ’, ‘ mask-box-image-slice ’, ‘ mask-box-image-width ’, ‘ mask-box-image-outset ’ and ‘ mask-box-image-repeat ’. Omitted values are set to their initial values.

7.7. Masking with the mask-box-image

After the mask-box-image given by ‘ mask-box-image-source ’ is sliced by the ‘ mask-box-image-slice ’ values, the resulting nine images are scaled, positioned, and tiled into their corresponding mask image regions in four steps:

    Scale to ‘ mask-box-image-width ’.

The two images for the top and bottom edges are made as tall as the top and bottom mask image area parts, respectively, and their width is scaled proportionally.

The images for the left and right edge are made as wide as the left and right mask image area parts, respectively, and their height is scaled proportionally.

The corner images are scaled to be as wide and as tall as the two mask-box-image edges they are part of.

If the first keyword is ‘ stretch ’, the top, middle and bottom images are further scaled to be as wide as the middle part of the mask image area. The height is not changed any further.

If the first keyword is ‘ round ’, the top, m >round ’ in the ‘ mask-image-repeat ’ property.

If the first keyword is ‘ repeat ’ or ‘ space ’, the top, middle, and bottom images are not changed any further.

The effects of ‘ stretch ’, ‘ round ’, ‘ repeat ’, and ‘ space ’ for the second keyword are analogous, acting on the height of the left, middle and right images.

Position the first tile.

    If the first keyword is ‘ repeat ’, the top, middle, and bottom images are centered horizontally in their respective areas. Otherwise the images are placed at the left edge of their respective parts of the mask-box-image area.

    If the second keyword is ‘ repeat ’, the left, middle, and right images are centered vertically in their respective areas. Otherwise the images are placed at the top edge of their respective parts of the mask-box-image area.

Tile and mask.

    The images are then tiled to fill their respective areas. All tiles are used together to mask the element and its descendants after drawing all stacking levels.

    In the case of ‘ space ’, any partial tiles are discarded and the extra space distributed before, after, and between the tiles. (I.e. the gap before the first tile, the gap after the last tile, and the gaps between tiles are equalized.) Note that this can result in empty mask-box-image side areas.

8. Clipping paths

The clipping path restricts the region to which paint can be applied, the so-called clipping region. Conceptually, any parts of the drawing that lie outside of this region are not drawn. This includes any content, background, borders, text decoration, outline and visible scrolling mechanism of the element to which the clipping path is applied, and those of its descendants.

An element’s ancestors may also clip portions of their content (e.g., via their own ‘ clip ’ or ‘ clip-path ’ properties and/or if their ‘ overflow ’ property is not ‘ visible ’). What is rendered is the cumulative intersection.

If the clipping region exceeds the bounds of the UA’s document window, content may be clipped to that window by the native operating environment.

8.1. The ‘ clip-path ’ property

Name:
Value: | | none
Initial: none
Applies to: All elements. SVG container elements, graphics elements and ‘ clipPath ’
Inherited: no
Percentages: as specified
Media: visual
Computed value: as specified, but with values made absolute
Animatable: yes

A basic shape function as defined in CSS3 Exclusions. Percentage values are resolved against the bounding client rect. (See [CSS3-EXCLUSIONS] .)

For SVG percentage values might be resolved according to the painted bounding box and not bounding client rect (alias object bounding box).

8.2. The ‘ clip-rule ’ property

Name:
Value: nonzero | evenodd
Initial: nonzero
Applies to: graphics elements within a ‘ clipPath ’ element
Inherited: yes
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: yes

See description of ‘ fill-rule ’ property [SVG11] . See description of ‘ fill-rule ’ property [SVG11] .

The ‘ clip-rule ’ property only applies to graphics elements that are contained within a ‘ clipPath ’ element.

whereas the following fragment of code will not cause an evenodd clipping rule to be applied because the ‘ clip-rule ’ is specified on the referencing element, not on the object defining the clipping shape:

8.3. The ‘ clip ’ property

Name:
Value: | auto
Initial: see individual properties
Applies to: Absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, ‘ pattern ’ elements and ‘ marker ’ elements.
Inherited: no
Percentages: N/A
Media: visual
Computed value: as specified
Animatable: yes

With this specification the ‘ clip ’ property is deprecated. Authors are encouraged to use the ‘ clip-path ’ property instead. UAs must support the ‘ clip ’ property.

The ‘ clip ’ property applies only to absolutely positioned elements. In SVG, it applies to elements which establish a new viewport, ‘ pattern ’ elements and ‘ marker ’ elements. Values have the following meanings: ‘ auto ’ The element does not clip.

In CSS 2.1, the only valid value is: rect( , , , ) where and specify offsets from the top border edge of the box, and , and specify offsets from the left border edge of the box. Authors should separate offset values with commas. User agents must support separation with commas, but may also support separation without commas (but not a combination), because a previous revision of this specification was ambiguous in this respect.

, , , and may either have a value or ‘ auto ’. Negative lengths are permitted. The value ‘ auto ’ means that a given edge of the clipping region will be the same as the edge of the element’s generated border box (i.e., ‘ auto ’ means the same as ‘ 0 ’ for and , the same as the used value of the height plus the sum of vertical padding and border widths for , and the same as the used value of the width plus the sum of the horizontal padding and border widths for , such that four ‘ auto ’ values result in the clipping region being the same as the element’s border box).

When coordinates are rounded to pixel coordinates, care should be taken that no pixels remain visible when and have the same value (or and have the same value), and conversely that no pixels within the element’s border box remain h >auto ’.

Example: The following two rules:

and assuming both Ps are 50 by 55 pixel, will create, respectively, the rectangular clipping regions delimited by the dashed lines in the following illustrations:

This diagram illustrates two block boxes, one above the other, with rectangular clipping regions of different dimensions. (See long description.)

8.4. The ‘ clipPath ’ element

Name:
Categories: None.
Content model: Any number of the following elements, in any order:
  • descriptive — ‘desc’ , ‘title’ , ‘metadata’
  • animation — ‘animate’ , ‘animateColor’ , ‘animateMotion’ , ‘animateTransform’ , ‘set’
  • shape — ‘circle’ , ‘ellipse’ , ‘line’ , ‘path’ , ‘polygon’ , ‘polyline’ , ‘rect’
  • ‘text’
  • ‘use’
Attributes:
  • conditional processing attributes — ‘requiredFeatures’ , ‘requiredExtensions’ , ‘systemLanguage’
  • core attributes — ‘id’ , ‘xml:base’ , ‘xml:lang’ , ‘xml:space’
  • presentation attributes — ‘alignment-baseline’ , ‘baseline-shift’ , ‘clip’ , ‘clip-path’ , ‘clip-rule’ , ‘color’ , ‘color-interpolation’ , ‘color-interpolation-filters’ , ‘color-profile’ , ‘color-rendering’ , ‘cursor’ , ‘direction’ , ‘display’ , ‘dominant-baseline’ , ‘enable-background’ , ‘fill’ , ‘fill-opacity’ , ‘fill-rule’ , ‘filter’ , ‘flood-color’ , ‘flood-opacity’ , ‘font’ , ‘font-family’ , ‘font-size’ , ‘font-size-adjust’ , ‘font-stretch’ , ‘font-style’ , ‘font-variant’ , ‘font-weight’ , ‘glyph-orientation-horizontal’ , ‘glyph-orientation-vertical’ , ‘image-rendering’ , ‘kerning’ , ‘letter-spacing’ , ‘lighting-color’ , ‘marker’ , ‘marker-end’ , ‘marker-mid’ , ‘marker-start’ , ‘mask’ , ‘opacity’ , ‘overflow’ , ‘pointer-events’ , ‘shape-rendering’ , ‘stop-color’ , ‘stop-opacity’ , ‘stroke’ , ‘stroke-dasharray’ , ‘stroke-dashoffset’ , ‘stroke-linecap’ , ‘stroke-linejoin’ , ‘stroke-miterlimit’ , ‘stroke-opacity’ , ‘stroke-width’ , ‘text-anchor’ , ‘text-decoration’ , ‘text-rendering’ , ‘unicode-bidi’ , ‘visibility’ , ‘word-spacing’ , ‘writing-mode’
  • ‘class’
  • ‘style’
  • ‘externalResourcesRequired’
  • ‘transform’
  • ‘clipPathUnits’
DOM Interfaces: SVGClipPathElement

Attribute definitions: clipPathUnits = «userSpaceOnUse | objectBoundingBox» Defines the coordinate system for the contents of the ‘ clipPath ’.
If clipPathUnits=»userSpaceOnUse» , the contents of the ‘ clipPath ’ represent values in the current user coordinate system in place at the time when the ‘ clipPath ’ element is referenced (i.e., the user coordinate system for the element referencing the ‘ clipPath ’ element via the ‘ clip-path ’ property).
If clipPathUnits=»objectBoundingBox» , then the user coordinate system for the contents of the ‘ clipPath ’ element is established using the bounding box of the element to which the clipping path is applied (see object bounding box units).
If attribute ‘ clipPathUnits ’ is not specified, then the effect is as if a value of ‘ userSpaceOnUse ’ were specified.
Animatable: yes.

CSS properties inherit into the ‘ clipPath ’ element from its ancestors; properties do not inherit from the element referencing the ‘ clipPath ’ element.

‘ clipPath ’ elements are never rendered directly; their only usage is as something that can be referenced using the ‘ clip-path ’ property. The ‘ display ’ property does not apply to the ‘ clipPath ’ element; thus, ‘ clipPath ’ elements are not directly rendered even if the ‘ display ’ property is set to a value other than none, and ‘ clipPath ’ elements are available for referencing even when the ‘ display ’ property on the ‘ clipPath ’ element or any of its ancestors is set to none.

A ‘ clipPath ’ element can contain ‘ path ’ elements, ‘ text ’ elements, basic shapes (such as ‘ circle ’) or a ‘ use ’ element. If a ‘ use ’ element is a child of a ‘ clipPath ’ element, it must directly reference ‘ path ’, ‘ text ’ or basic shapes elements. Indirect references are an error and the ‘ clipPath ’ element must be ignored.

For a given graphics element, the actual clipping path used will be the intersection of the clipping path specified by its ‘ clip-path ’ property (if any) with any clipping paths on its ancestors, as specified by the ‘ clip-path ’ property on the elements which establish a new viewport. (See [SVG11] )

A couple of notes:

  • The ‘ clipPath ’ element itself and its child elements do not inherit clipping paths from the ancestors of the ‘ clipPath ’ element.
  • The ‘ clipPath ’ element or any of its children can specify property ‘ clip-path ’.
    If a val >clip-path ’ reference is placed on a ‘ clipPath ’ element, the resulting clipping path is the intersection of the contents of the ‘ clipPath ’ element with the referenced clipping path.
    If a val >clip-path ’ reference is placed on one of the children of a ‘ clipPath ’ element, then the given child element is clipped by the referenced clipping path before OR’ing the silhouette of the child element with the silhouettes of the other child elements.
  • An empty clipping path will completely clip away the element that had the ‘ clip-path ’ property applied.

8.5. Clipping paths, geometry, and pointer events

A clipping path is conceptually equivalent to a custom viewport for the referencing element. Thus, it affects the rendering of an element, but not the element’s inherent geometry. The bounding client rect of a clipped element (that is, an element which references a ‘ clipPath ’ element via a ‘ clip-path ’ property, or a child of the referencing element) must remain the same as if it were not clipped.

By default, pointer events must not be dispatched on the clipped (non-visible) regions of a shape. For example, a circle with a radius of 10 which is clipped to a circle with a radius of 5 will not receive ‘ click ’ events outs >9. Security

9.1. Origin Restrictions

External references to resources like ‘ mask ’ or ‘ clipPath ’ must not violate the same origin restrictions [CORS] .

This restriction includes:

  • Any images, either as content or via styling, that are not exposed with CORS
  • Any tainted canvas
  • Any cross-origin content referenced by ‘ xlink:href ’ or

If content falls under this restriction, the resource must be rejected. The element is drawn as if the resource was not specified (i.e. the ‘ clip-path ’ or ‘ mask ’ property were set to ‘ none ’).

10. DOM interfaces

10.1. Interface SVGClipPathElement

The SVGClipPathElement interface corresponds to the ‘ clipPath ’ element. Attributes: clipPathUnits (readonly SVGAnimatedEnumeration)

10.2. Interface SVGMaskElement

The SVGMaskElement interface corresponds to the ‘ mask ’ element. Constants in group “Mask Types”: SVG_MASKTYPE_LUMINANCE (unsigned short)

Илон Маск рекомендует:  Что такое код stretchbit
Понравилась статья? Поделиться с друзьями:
Кодинг, CSS и SQL