Estou procurando uma resposta sólida sobre se existe ou não um equivalente a -webkit-mask em navegadores Gecko / Firefox?
Se não, há alguma maneira de degradar -webkit-mask em CSS para um acordo de imagem de fundo simples ou devo simplesmente desistir e usar Javascript?
Muito obrigado!
Respostas:
5 para resposta № 1Se o seu objetivo é o firefox, ele tem um ótimo suporte a SVG, então agora você pode usar máscaras SVG em vez de CSS. Aqui está a documentação do Mozillas sobre como fazer uma máscara em SVG As máscaras de Webkit não são padrões - então tenho uma dúvida pessoal de que você as verá em qualquer navegador.
3 para resposta № 2
Depois de lutar com isso por muitas horas, finalmente consegui aplicar um caminho SVG complexo como uma máscara para um elemento div em meu site, e ele funciona no Firefox. Aqui está o que eu fiz:
Primeiro, para navegadores Webkit, a solução foiideal, e eu simplesmente tive que fazer um arquivo png achatado com o mesmo tamanho (ou realmente a mesma forma, poderia ter uma escala diferente) que o div que eu quero mascarar, e com a área que quero que fique visível em preto, e o partes que eu quero cortadas transparentes. Em seguida, adicionei a seguinte linha ao CSS para o elemento div que desejo mascarar:
-webkit-mask-box-image: url(path/to/mask.png);
Essa foi fácil!Agora vamos à parte divertida de fazer isso funcionar no Firefox. Para que esse método funcione, a forma do vetor deve ter exatamente o mesmo tamanho da área que você deseja mascarar. Portanto, minha máscara é um caminho vetorial relativamente complexo projetado em Fireworks e preciso convertê-lo em um caminho SVG e, felizmente, tenho o Illustrator disponível. Caso contrário, use seu editor SVG favorito para converter seu caminho de forma em SVG. Se você também estiver usando o Fireworks para desenhar suas formas vetoriais, você pode clicar com o botão direito do mouse na forma vetorial que deseja usar, ir em "Editar" -> "Copiar contornos do caminho" e, em seguida, colá-lo em um documento suficientemente grande no Illustrator ou em qualquer editor SVG que esteja usando.
Em seguida, você precisa exportá-lo para um arquivo SVG.No Illustrator, usei a função "Export for Web", selecionei o formato SVG, versão 1.0, e exportei para um arquivo SVG. A posição e o tamanho do documento não importam muito, já que estamos logo após a descrição do caminho e descartamos o resto.
Então, agora abra aquele arquivo SVG que você acabou de criar com um editor de texto, como Text Edit ou Notepad. Você verá algum conteúdo formatado em XHTML e um elemento em particular é algo como:
<path fill-rule="evenodd" clip-rule="evenodd" d="M0,43v0.5V44v0.5v1V46v0.5v1V48v0..."/>
o d="..." parte provavelmente terá muitas linhas para uma forma complexa. Esta é a única parte deste arquivo SVG com a qual nos importamos.
Em seguida, devemos incorporar uma máscara SVG descrevendo este caminho em nosso HTML do site. Primeiro, vamos adicionar os seguintes elementos ao nosso 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>
Agora, simplesmente copiamos o conteúdo do d="" propriedade do elemento de caminho do arquivo SVG que salvamos anteriormente (ou seja, M0,43v0 ...) e colamos no mesmo d="" propriedade do elemento de caminho no elemento de máscara do SVG incorporado. Em seguida, podemos adicionar a seguinte entrada ao CSS para o elemento que queremos mascarar:
mask: url("#maskid");
É isso. O caminho agora deve ser aplicado como uma máscara ao elemento que você especificou.
1 para resposta № 3
Aqui está o truque, você precisa converter todos os pontos gerados em seu arquivo SVG para uma proporção que seja igual ao caminho do ponto dividido pela dimensão da máscara.
Para uma explicação mais fácil, criei uma ferramenta rápida para ajudar os designers a converter seu svg em uma máscara compatível com o Firefox. Você pode ver uma demonstração ao vivo no meu site ( http://www.prollygeek.com ), por exemplo, o logotipo do Facebook e o logotipo do Twitter são apenas máscaras, e aqui está a ferramenta que você pode usar para converter seu SVG em uma máscara: http://prollygeek.com/svg-mask/
por exemplo:
<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"/>
será direcionado para:
<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;"/>
Não se esqueça de adicionar este atributo style = "fill-rule: evenodd; clip-rule: evenodd; fill: #ffffff;"
e preencher com qualquer cor, não importa.
em seguida, vincule sua máscara ao elemento css desejado:
por exemplo:
mask:url(images/fb.svg#fb);
o uso da calculadora é gratuito, mas não copie ou publique em nenhum outro lugar.
0 para a resposta № 4
Você pode aplicar filtros SVG com css ao conteúdo HTML no Gecko. Aqui é um exemplo de um cara que gosta de mexer no código Mozilla. É de 2008, então pode estar um pouco desatualizado.