Поработав с этим в течение многих часов, я наконец смог применить сложный путь 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-файл, который вы только что создали, в текстовом редакторе, таком как «Редактирование текста» или «Блокнот».Вы увидите некоторый контент в формате 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");
Вот и все.Теперь путь должен быть применен в качестве маски к указанному вами элементу.