Блог

Я ищу четкий ответ о том, существует ли эквивалент -webkit-mask в браузерах Gecko / Firefox?

Если нет, есть ли какой-либо способ деградации -webkit-mask в CSS до простого преобразования фонового изображения или я должен просто отказаться и использовать Javascript?

Большое спасибо!

Если вы ориентируетесь на Firefox, у него отличная поддержка SVG, так что теперь вы можете использовать SVG-маски вместо CSS. Вот документация Mozilla о том, как создать маску в SVG Маски Webkit не соответствуют стандартам, поэтому я лично сомневаюсь, что вы когда-нибудь увидите их в кроссбраузерном режиме.

После долгих часов борьбы с этим я, наконец, смог применить сложный SVG-путь в качестве маски для элемента div на моем сайте, и это работает в Firefox. Вот что я сделал:

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

 -webkit-mask-box-image: url(path/to/mask.png);
  

Это было просто! Теперь давайте перейдем к самой интересной части того, как это работает в Firefox. Чтобы этот метод работал, векторная форма должна быть точно такого же размера, как область, которую вы хотите замаскировать. Итак, моя маска представляет собой относительно сложный векторный контур, разработанный в Fireworks, и мне нужно преобразовать его в SVG-контур, и, к счастью, у меня есть Illustrator. В противном случае воспользуйтесь вашим любимым SVG-редактором, чтобы преобразовать путь к фигуре в SVG. Если вы также используете Fireworks для рисования векторных фигур, вы можете щелкнуть правой кнопкой мыши на векторной фигуре, которую хотите использовать, перейти к «Редактировать» -> «Копировать контуры пути», а затем вы можете вставить ее в достаточно большой документ в Illustrator или любом другом SVG-редакторе, который вы используете.

Далее вам нужно экспортировать его в SVG-файл. В Illustrator я использовал функцию «Экспорт в Веб», выбрал формат SVG версии 1.0 и экспортировал его в SVG-файл. Позиция и размер документа на самом деле не имеют значения, поскольку мы следуем только за описанием пути, а остальное мы отбросим.

Итак, теперь откройте тот SVG-файл, который вы только что создали с помощью текстового редактора, такого как Text Edit или Notepad. Вы увидите некоторое содержимое в формате XHTML, и один элемент, в частности, выглядит примерно так:

 <path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>
  

d="..." Часть, вероятно, будет длиной во много строк для сложной формы. Это единственная часть этого SVG-файла, которая нас интересует.

Далее мы должны встроить SVG-маску, описывающую этот путь, в HTML нашего сайта. Во-первых, давайте добавим следующие элементы в наш HTML:

 <svg version="1.1" xmlns="http://www.w3.org/2000/svg">
    <defs>
        <mask id="maskid" maskUnits="userSpaceOnUse"> 
            <path fill="white" d=""/>
        </mask>
    </defs>
</svg>
  

Теперь мы просто копируем содержимое d="" свойства элемента path из файла SVG, который мы сохранили ранее (т. Е. M0,43v0 …) и вставляем в то же d="" свойство элемента path во встроенном элементе маски SVG. Затем мы можем добавить следующую запись в CSS для элемента, который мы хотим замаскировать:

 mask: url("#maskid");
  

Вот и все. Теперь путь должен быть применен в качестве маски к указанному вами элементу.

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

Для упрощения объяснения я создал быстрый инструмент, помогающий дизайнерам конвертировать свой svg-файл в маску, совместимую с firefox, вы можете посмотреть демонстрационную версию на моем веб-сайте (http://www.prollygeek.com ), например, facebook logo и twitter logo — это просто маски, и вот инструмент, который вы можете использовать для преобразования вашего svg в маску: http://prollygeek.com/svg-mask

например:

 <mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M236.626,120.827v27.295h-14.851c-4.416,0-7.225,1.204-8.63,3.612c-1.003,1.604-1.405,4.415-1.405,8.229v12.442h25.287l-3.01,27.494H211.74v79.273h-32.712v-79.273h-16.055v-27.494h16.055v-16.457c0-16.858,5.82-27.695,17.259-32.311
c5.619-2.208,10.436-2.811,15.453-2.811H236.626z"/>
  

будет обращено к:

 <mask id="fb"  maskUnits="objectBoundingBox" maskContentUnits="objectBoundingBox">
<path d="M0.59,0.3v0.0675h-0.035c-0.01,0-0.0175,0.0025-0.02,0.0075c-0.0025,0.0025-0.0025,0.01-0.0025,0.02v0.03h0.0625l-0.0075,0.0675H0.5275v0.1975h-0.08v-0.1975h-0.04v-0.0675h0.04v-0.04c0-0.04,0.0125-0.0675,0.0425-0.08c0.0125-0.005,0.025-0.005,0.0375-0.005H0.59z" style="fill-rule:evenodd;clip-rule:evenodd;fill:#ffffff;"/>
  

Пожалуйста, не забудьте добавить этот атрибут style=»fill-rule: evenodd;clip-rule: evenodd;fill:#ffffff;»

и заливайте любым цветом, это не имеет значения.

после этого привяжите свою маску к желаемому элементу css:

например:

   mask:url(images/fb.svg#fb);
  

калькулятор бесплатный в использовании, но, пожалуйста, не копируйте и не публикуйте где-либо еще.

Вы можете применять svg-фильтры с css к HTML-контенту в Gecko. Вот пример от парня, который любит возиться с кодом Mozilla. Это с 2008 года, поэтому может быть немного устаревшим.