Estilo CSS do SVG

Podemos usar CSS para definir o estilo das formas SVG. Estilo é mudar a aparência da forma. Isso pode ser a cor e largura da linha de traço, cor de preenchimento, opacidade e muitas outras propriedades da forma.

Há6Esses estilos podem definir formas em imagens SVG. Cada um será介绍的在这个文章中. No final deste artigo, você encontrará uma lista de propriedades CSS que podem ser usadas com SVG.

Uso de propriedades de estilo CSS

Se é possível usar propriedades de estilo específicas (por exemplo, stroke e fill) para estilizar formas SVG. Este é um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<circle cx="40" cy="40" r="24"　stroke="#000000"　fill="#00ff00"　/>
</svg>

Embora haja uma série de propriedades de estilo disponíveis. No entanto, é recomendado usar uma tabela de estilo embutida ou externa, então não vou discutir muito sobre as propriedades de estilo aqui.

Uso de propriedade style e propriedades CSS

Este método não usa propriedades específicas de estilo. Em vez disso, ele usa apenas a propriedade style e especifica as propriedades CSS dentro dela. Se você precisar embedding estilos diretamente no estilo, este método é preferível às propriedades específicas, pois você pode aprender os nomes das propriedades CSS. As propriedades CSS dentro de tabelas de estilo internas ou externas são as mesmas, então copiar e colar e aprender esse conteúdo é mais fácil.

Este é um círculo com contorno e preenchimento definidos por meio do atributo style e propriedades CSS:

<svg xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink"><circle　cx="40" cy="40" r="24"　style="stroke:　#000000;　fill:#00ff00;"　/></svg>

Uso de tabela de estilos embutida

Os estilos das formas podem ser definidos em uma tabela de estilos embutida e aplicados automaticamente a todas as formas. Este é um exemplo:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　]]>
　　　　</style>
　　　　
　　　　<circle　　cx="40" cy="40" r="24"/>
</svg>

Atenção à forma como os estilos do elemento circle são definidos dentro do elemento <style>. Isso funciona da mesma maneira que no HTML e CSS.

Tabelas de estilos internos no Internet Explorer 7e Firefox 3.0.5trabalham normalmente.

O efeito é o seguinte:

Atributo de classe

Pode usar os atributos de propriedades dentro da forma para escolher o estilo da forma, em vez de aplicar o estilo a todos os tipos específicos de forma (por exemplo, todos os círculos). Como a classe é usada em elementos HTML. A propriedade class

Este é um exemplo de dois estilos de círculos-Verde e vermelho. O <circle> usa os seguintes atributos class para aplicar cada um desses estilos aos seus respectivos elementos:

<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<style type="text/css" >
　　　　　　<![CDATA[
　　　　　　　　circle.myGreen {
　　　　　　　　　　　stroke: #006600;
　　　　　　　　　　　fill: #00cc00;
　　　　　　　　}
　　　　　　　circle.myRed {
　　　　　　　stroke: #660000;
　　　　　　　fill: #cc0000;
　　　　}
　　　　　　]]>
　　　　</style>
　　　　<circle class="myGreen" cx="40" cy="40" r="24"/>
　　　　<circle class="myRed" cx="40" cy="100" r="24"/>
</svg>

Observe que o circle, o nome do seletor na tabela de estilos tem sufixo .myGreen e .myRed. Agora, o elemento <circle> pode usar class="myGreen" para definir o estilo verde ou class="myRed" para definir o estilo vermelho do círculo.

usar tabelas de estilos externas

ao usar tabelas de estilos externas, a tabela de estilos é colocada em um arquivo separado e colocado no servidor da Web, como o arquivo CSS externo da página HTML. Além disso, antes do elemento <svg>, você precisa incluir a seguinte declaração no arquivo SVG:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>

Esta instrução de processamento informa ao visualizador do SVG para usar a tabela de estilos CSS para encontrar o arquivo " svg-stylesheet.css”.

Este é um exemplo de declaração dentro de um arquivo SVG:

<?xml-stylesheet type="text/css" href="svg-stylesheet.css" ?>
<svg xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<circle cx="40" cy="40" r="24"
　　　　　　　style="stroke:#006600; fill:#00cc00"/>
</svg>

Atenção: as tabelas de estilos CSS externas no Internet Explorer 7parece funcionar normalmente, mas no Firefox 3.0.5não pode.

usar uma tabela de estilos no HTML.

Se o SVG for incorporado em uma página HTML, também é possível incorporar a tabela de estilos do SVG na página HTML. Este é um exemplo:

<html>
<body>
<style>
</style>
<svg>
</svg>
</body>
</html>

Para adicionar estilo a formas dentro de uma imagem SVG, basta adicionar atributos CSS normais dentro do elemento style. Você pode usar os seletores CSS habituais para definir o estilo dos elementos SVG. Este é um exemplo de página HTML, onde o elemento circle é estilizado por meio da tabela de estilos CSS dentro da página HTML:

<html>
<body>
<style>
　　circle {
　　　　　stroke: #006600;
　　　　　fill: #00cc00;
　　}
</style>
<svg>
　　<circle cx="40" cy="40" r="24"　/>
</svg>
</body>
</html>

Se o SVG for diretamente incorporado na página HTML, isso pode ser o método mais simples para configurar o estilo da forma SVG.

Substituição local de tabela de estilos na forma

Se o estilo já foi configurado na tabela de estilos, ele pode ser substituído configurando novos atributos de estilo localmente dentro da forma que se deseja estilizar. Estilos configurados localmente dentro da forma sempre têm prioridade em relação aos estilos definidos em tabelas internas ou externas.

Atributos CSS do SVG

Os elementos SVG têm os seguintes atributos CSS que podem ser configurados. Não todos os elementos têm todos esses atributos. Portanto, os atributos CSS são divididos em várias tabelas para diferentes elementos.

Atributos CSS de forma

Atributos CSS do elemento path e outros elementos de forma:

Propriedades CSS de Texto

Propriedades CSS do elemento de texto:

Propriedades CSS de Gradiente

Propriedades CSS de Gradiente do SVG: