Na semana passada, no primeiro post desta série sobre efeitos de filtro SVG, cobrimos os fundamentos dos filtros SVG – como criá-los e como usá-los. Também abordamos algumas das operações de filtro usadas com mais frequência (também conhecidas como primitivas de filtro). Estaremos reutilizando um pouco do que abordamos no primeiro post deste artigo. Então, a menos que você já esteja familiarizado com eles, recomendo reservar alguns minutos para ler esse artigo antes de prosseguir com este.
<feMorphology>é uma das minhas operações de filtro SVG favoritas. É também uma das operações mais simples e os resultados da aplicação a diferentes elementos são previsíveis na maior parte do tempo.
O que é Morphing?
Meta significa transformar ou alterar a forma ou a forma de um objeto.
O filtro de morfologia opera na forma de um objeto. Ele fornece duas transformações de forma predefinidas: erosão (também conhecida como diluição ou encolhimento) e dilatação (também conhecido como espessamento ou expansão). Em outras palavras, o feMorphologyprimitivo pode ser usado para reduzir ou expandir elementos.
Tecnicamente falando, essas duas operações operam em um nível de pixel, expandindo um pixel em seus pixels vizinhos (dilatam) ou desintegrando os pixels vizinhos nas bordas do pixel sendo operado (erode), enquanto ainda mantém traços ao redor da borda desse pixel . A quantidade pela qual um pixel é dilatado, ou o número de pixels vizinhos usados para “esticar” ou “expandir” um pixel, é determinado por um parâmetro de raio.
<feMorphology in=".." result=".." operator="dilate || erode" radius="">
</feMorphology>
Você pode pensar no raio de morphing como o raio de um círculo ou elipse; qualquer pixel vizinho que esteja dentro do círculo determinado por este raio e começando no pixel de entrada, conta como um pixel vizinho e será usado no efeito de dilatação ou erosão.
Na realidade, porém, o raio realmente define o tamanho de um kernel conhecido como elemento estruturantee que se parece mais com uma matriz. Por enquanto, basta pensar sobre isso em termos de um pequeno retângulo cuja largura e altura são determinadas em pixels especificados no atributo radius.
Para usar o filtro, não precisamos entrar nos detalhes nerds do que a metamorfose faz em um nível de pixel. Basta saber que você pode fornecer um ou dois valores de raio para feMorphologydeterminar o valor pelo qual seu elemento será reduzido ou expandido. Se você fornecer dois números no radiusatributo, o primeiro corresponderá ao raio xeo segundo determinará o raio y.
Imagens Morphing
Quando a feMorphologyoperação é aplicada a imagens, resulta em dois resultados geralmente previsíveis:
- O tamanho da imagem (dimensões) fica menor se o
erodeoperador for usado e maior se odilateoperador for usado. - Com qualquer um dos operadores, a imagem parece ter sido pintada com um pincel grande, com poucos detalhes.
Então, assumindo que queremos aplicar o efeito de morphing a uma imagem, nosso código ficaria tão simples como este:
<svg width="450" height="300" viewBox="0 0 450 300">
<filter id="erode">
<feMorphology operator="erode" radius="3"></feMorphology>
</filter>
<image xlink:href="..." width="90%" height="90%" x="10" y="10" filter="url(#erode)">
</image>
</svg>
Neste trecho, estamos erodindo (encolhendo) a imagem (pixels na) em 3 pixels. A imagem a seguir mostra o resultado desse código. Observe como o tamanho da imagem é um pouco menor à direita:
O resultado (à direita) da aplicação do efeito de morphing da erosão à imagem à esquerda.
Agora, se mantivermos o mesmo raio de metamorfose e mudarmos o operador de erodepara dilate, o efeito será semelhante, mas também distintivamente diferente:
O resultado (à direita) de aplicar a operação de metamorfose dilata à imagem à esquerda
Em ambos os casos, a imagem parece uma versão abstrata pintada de si mesma, e seu tamanho geral muda à medida que seus pixels se expandem ou encolhem.
Mas, além desses resultados, provavelmente a primeira coisa que você notará é a diferença de cores resultante de cada um desses dois efeitos: erodeproduz uma imagem com mais pixels escuros, enquanto dilateproduz uma saída de luz. Isso se deve ao fato de que:
erode(o valor padrão) define cada pixel como o vizinho mais escuro ou mais transparente, respectivamente para cada um dos canais R, G, B e A edilatedefine cada canal de cada pixel para corresponder ao valor mais claro ou menos transparente de seus vizinhos, para cada canal, respectivamente.
Com toda essa tecnicalidade de lado, aplicar feMorphologya imagens quase sempre terá o mesmo resultado: uma versão de pintura de baixo detalhamento, encolhida ou expandida, da imagem com traços principais escuros ou claros.
Quando aplicado a elementos de cor única, no entanto, como texto, feMorphologyapenas reduz ou expande o elemento – nenhuma alteração de cor de pixel visível ocorre porque só temos uma cor para trabalhar…
Adicionando contorno colorido ao texto com feMorphology
Atualmente, podemos adicionar um esboço ao texto em SVG usando o strokeatributo nesse texto.
<!-- Adding an outline to SVG text using strokes -->
<text font-size="80px" dx="100" dy="200" font-weight="700" stroke="deepPink" stroke-width="3px">Stroked Text</text>
Ao adicionar um traçado, o traço geralmente é centralizado nas bordas do texto, de modo que metade de sua espessura se sobrepõe ao próprio texto, tornando o texto mais fino, mesmo quando não é suposto. Em vez de reduzir a espessura do texto para adicionar um contorno, deveríamos conseguir expandir (ou dilatar ) o texto de modo que a espessura do contorno ou pincelada seja adicionada à do texto. Nós podemos fazer isso usando feMorphology.
Salvo disposição em contrário, o texto geralmente vem em uma cor. Então, aplicado ao texto, feMorphologypermite encolher ou engrossar esse texto. Uma vez que o texto é engrossado usando feMorphology, ele pode ser usado como entrada para outras primitivas de filtro que, em seguida, nos permitem criar contornos de texto da maneira que eles devem ser criados.
Antes de nos aprofundarmos em como fazer isso, aqui está uma imagem mostrando a diferença entre o texto com um contorno de traço e um contorno adicionado usando feMorphology.
Então, vamos criar um pedaço colorido de texto com um contorno. Nós vamos dar um passo a passo. Este é o resultado que pretendemos:
Então, começaremos com um SVG contendo nosso texto e um filtro que começa com uma simples operação de dilatação. A quantidade que você dilata o texto depende da espessura do contorno que você deseja.
<svg width="900" height="200" viewBox="100 0 900 200">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology>
</filter>
<!-- DILATED TEXT -->
<text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text>
</svg>
O código acima irá obter o canal alfa do texto – que é apenas uma versão preta do texto – e vai engrossar por 4px. O resultado do código neste ponto é assim:
..comparado ao texto original que tem uma cor de preenchimento azul escuro:
Para criar o efeito de contorno, vamos colocar o texto original em cima do texto dilatado , o que deixará apenas as bordas do texto dilatado (o 4px adicional) visíveis atrás do texto original, fazendo com que pareçam um contorno. Sobrepondo o texto em cima do seu esboço (o texto dilatado) será alcançado usando feMerge. Nós cobrimos feMergeno artigo anterior .
Outra coisa que queremos fazer antes de posicionarmos o esboço por trás do texto é colorir esse esquema. Também semelhante ao que fizemos no artigo anterior, vamos inundar a área da região do filtro com a cor que queremos e, em seguida, compor a camada de cor com a camada de texto dilatada (nosso contorno) usando o inoperador. Como resultado, somente as partes da cor de dilatação que se cruzam com o texto dilatado serão renderizadas e a cor será mesclada com esse texto, colorindo-o. Finalmente, mesclaremos o contorno colorido resultante com o texto original para obter o resultado desejado. Nosso código agora é assim:
<svg width="900" height="200" viewBox="100 0 900 200">
<filter id="outline">
<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="4"></feMorphology>
<feFlood flood-color="#32DFEC" flood-opacity="1" result="PINK"></feFlood>
<feComposite in="PINK" in2="DILATED" operator="in" result="OUTLINE"></feComposite>
<feMerge>
<feMergeNode in="OUTLINE" />
<feMergeNode in="SourceGraphic" />
</feMerge>
</filter>
<!-- DILATED TEXT -->
<text font-size="85px" dx="125" dy="130" font-weight="700" filter="url(#outline)">upgrade yourself</text>
</svg>
Criar um efeito de filtro no SVG é uma questão de pensar no resultado final em termos de operações menores e usar o resultado de uma operação como entrada para outra e, finalmente, mesclar todas as camadas que criamos para alcançar o resultado final.
O seguinte é uma demonstração ao vivo do código acima:
A cor de preenchimento do texto pode ser especificada no seu CSS ou no textelemento usando o fillatributo. A cor do contorno pode ser ajustada no flood-coloratributo do feFloodprimitivo.
Batendo o texto para fora
Além de adicionar um contorno ao texto dilatando seu canal alfa e colocando-o atrás do texto, podemos criar texto somente de contorno, também conhecido como texto vazado, o que significa que o interior do texto será “esculpido” para que você possa ver o texto fundo atrás dele através do contorno. Um exemplo de tal efeito pode se parecer com o texto no seguinte GIF, que mostra uma cor que muda de fundo e como esse fundo pode ser visto em nosso texto. Esta é a demonstração que iremos criar nesta seção:
Esse efeito é mais fácil de criar, e o código necessário para torná-lo é visivelmente mais curto. A principal diferença aqui é que ao invés de mergulhar o texto de origem em cima do texto dilatado, vamos usar esse texto fonte para cortar as partes internas do texto dilatado . Isso significa que apenas a espessura adicionada do texto dilatado permanecerá, enquanto o interior será removido, dando-nos o nosso esboço.
Podemos fazer isso compondo o texto de origem com o texto dilatado. Nosso texto-fonte ficará no topo e o texto dilatado será o pano de fundo. Usando o outoperador composto, apenas as partes do plano de fundo que não se sobrepõem à camada de origem serão renderizadas, o que no nosso caso significa que apenas o contorno será renderizado.
<svg width="900" height="450" viewBox="0 0 900 450">
<filter id="outliner">
<!-- Start by grabbing the alpha channel of the text and dilating it-->
<feMorphology operator="dilate" radius="8" in="SourceAlpha" result="THICKNESS" />
<!-- Next, grab the original text (SourceGraphic) and use it to cut out the inside of the dilated text -->
<feComposite operator="out" in="THICKNESS" in2="SourceGraphic"></feComposite>
</filter>
<text dx="100" dy="300" filter="url(#outliner)" letter-spacing="10px">SVG Rocks</text>
</svg>
Usando uma bela fonte, nossa demonstração agora é assim:
Legal. Agora, e se você quiser mudar a cor do contorno? Você teria que usar o feFloodprimitivo novamente e compor a cor do Flood com o contorno. E então, toda vez que você quiser mudar a cor do contorno, você terá que fazer o mesmo várias vezes. Isto é, reconhecidamente, muito tedioso. Felizmente, existe uma maneira mais simples.
Se, em vez de pegar e dilatar o canal alfa do texto (que é preto por padrão), você pega o próprio texto de origem (que pode ter qualquer cor de preenchimento!), Dilata-o e usa o texto novamente para esculpir o interior de o texto dilatado, você acaba com um esboço que vem do próprio texto fonte . Isso significa que a cor desse contorno será sempre igual à cor do texto de origem. E como podemos definir a cor de preenchimento do texto de origem em CSS, isso significa que você tem um texto de contorno separado de seus estilos. (Yay separação de preocupações!) Você pode aplicar o filtro para qualquer pedaço de texto e alterar a cor desse texto no CSS sempre que você precisar, sem ter que ajustar o código do filtro. Nosso código aprimorado agora se parece com isso:
<svg width="900" height="450" viewBox="0 0 900 450">
<filter id="outliner">
<!-- Start by grabbing the source graphic (the text) and dilating it-->
<feMorphology operator="dilate" radius="8" in="SourceGraphic" result="THICKNESS" />
<!-- Then use the text (the SourceGraphic) again to cut out the inside of the dilated text -->
<feComposite operator="out" in="THICKNESS" in2="SourceGraphic"></feComposite>
</filter>
<text dx="100" dy="300" filter="url(#outliner)" letter-spacing="10px">SVG Rocks</text>
</svg>
Na nossa folha de estilo, podemos escolher a cor do contorno, bem como a cor de fundo do SVG. Você também pode optar por ter uma imagem por trás do texto dentro do SVG. Eu estou usando animações CSS no código abaixo para animar a cor do fundo, sem nenhuma outra razão além de ser legal.
svg text {
font-family: 'Bangers', cursive;
font-size: 150px;
letter-spacing: 13px;
fill: #000; /* This fill color determines the color of the outline */ }
svg {
background-color: gold;
animation: colorsssss 2s linear infinite;
animation-delay: 3s;
}
@keyframes colorsssss {
50% {
background-color: deepPink;
}
}
O filtro SVG acima é reutilizável em SVG e HTML . Se você quiser aplicá-lo a um elemento HTML, poderá fazer isso usando a filterpropriedade; basta colocar o filtro no seu HTML e “chamar” no seu CSS:
h2 {
filter: url(#outliner);
/* You can change the color of the outline here by changing the color of the heading */
color: deepPink;
}
E nossa demonstração terminada que inclui um cabeçalho HTML com o filtro aplicado a ele:
Minha coisa favorita sobre essa receita de filtro é que ela pode ser usada como um aprimoramento visual. Se um navegador não suportar filtros SVG, ou se não suportar filtros CSS, ou não for compatível com a aplicação de filtros SVG a elementos HTML, o usuário obterá o texto original sem o efeito de contorno / eliminação aplicado a ele. Ah, e a cereja no topo do bolo? Tanto o texto SVG quanto o HTML serão totalmente acessíveis, pesquisáveis e selecionáveis. Melhoramento progressivo! Yay SVG!
Palavras finais
Usando apenas duas operações de filtro no SVG, você pode aplicar um efeito de texto delineado ao seu conteúdo de texto SVG ou HTML. Coloque este filtro no seu HTML e use-o e reutilize-o quantas vezes precisar.
No próximo artigo desta série, vamos dar uma olhada no <feComponentTransfer>, um dos meus primitivos de filtro favoritos, e ver como ele funciona e quais efeitos podemos criar com ele. Fique ligado.