Styling Scalable Vector Graphic (SVG) com CSS
Hoje vamos continuar nossa discussão sobre Scalable Vector Graphic (SVG), e como apontamos em nosso post anterior, uma das vantagens de usar o SVG é que ele pode ser estilizado com CSS.
Propriedades de estilo SVG
O SVG de estilo basicamente funciona da mesma maneira que nos elementos HTML regulares, eles de fato compartilham algumas propriedades comuns também. No entanto, existem outras propriedades que se destinam especificamente para objetos SVG que têm suas próprias especificações além do CSS.
Por exemplo, no elemento HTML regular, podemos adicionar cor de fundo com cor de fundo ou fundo Propriedade CSS. No SVG, é um pouco diferente; a cor de fundo é especificada com o preencher propriedade em vez disso. Além disso, a borda do elemento é especificada com acidente vascular encefálico propriedade e não é com o fronteira como fizemos em HTML regular, você pode ver a lista completa aqui.
Se você tem trabalhado bastante com o editor de vetores, como o Adobe Illustrator, pode adivinhar rapidamente que o mecanismo de nomeação de propriedade no SVG é originado do editor.
Implementação de Estilo SVG
Podemos usar uma das seguintes maneiras de estilizar o elemento SVG;
Atributos de apresentação
Se você viu todas as propriedades do SVG, todas elas podem ser adicionadas diretamente no elemento para alterar a apresentação do elemento. O exemplo a seguir mostra como podemos adicionar preencher e acidente vascular encefálico propriedade diretamente em um rect elemento;
O retângulo será como a imagem abaixo;
Folha de Estilo Inline
Nós também podemos adicionar estilo com o estilo atributo. No exemplo a seguir, também adicionaremos preencher e acidente vascular encefálico ao rect, mas desta vez vamos adicioná-lo dentro do estilo e rodar com CSS3 transformar propriedade, como assim;.
O retângulo irá girar no mesmo resultado, só que agora ele também é girado;
Folha de Estilo Interno
Incorporar o estilo SVG dentro do estilo elemento também é possível e não é diferente de como fizemos em HTML regular. Este exemplo abaixo mostra como adicionamos estilos internos para afetar elementos SVG em .html documento.
No entanto, o SVG é uma linguagem baseada em XML, então quando estamos prestes a adicionar uma folha de estilo inline em um .svg documento, precisamos colocar a declaração de estilos dentro cdata, do seguinte modo;
o cdata aqui é necessário, já que o CSS pode ter > caractere que entrará em conflito com os analisadores XML. Usando cdata é altamente recomendado para incorporar estilo em SVG, mesmo que o caractere conflitante não seja fornecido na folha de estilo.
Folha de estilo externa
A folha de estilo externa também funciona da mesma maneira para elementos SVG .html documento.
Novamente em .svg documento, precisamos encaminhar a folha de estilos externa como folha de estilo xml, igual a.
Agrupando Elementos
Elementos SVG podem ser agrupados com o
Tanto o retângulo como o círculo terão o mesmo resultado.
Pensamento final
Nós percorremos todos os assuntos essenciais sobre o estilo SVG com CSS e esta é apenas uma das vantagens de servir gráficos com SVG. Na próxima postagem vamos dar uma olhada em outra, então fique ligado.
- Ver demonstração
- Fonte de download
