class
« Página inicial da referência de atributos do SVG
Atribui um nome de classe ou um conjunto de nomes de classe a um elemento. Você pode atribuir o mesmo nome ou nomes de classe para qualquer número de elementos. Se você especificar vários nomes de classe, estes devem ser separados por caracteres de espaço em branco.
O nome de classe de um elemento tem duas funções principais:
- Como um seletor de folha de estilo, para a utilização quando um autor quiser atribuir informações de estilo a um conjunto de elementos.
- Para utilizações gerais do navegador.
A classe pode ser utilizada pra estilizar o conteúdo do SVG com CSS.
Utilização
| Categorias | Nenhuma |
|---|---|
| Valor | <list-of-class-names> |
| Animável | Sim |
| Documento normativo | SVG 1.1 (2ª Edição): O atributo class |
{{ page("/pt-BR/SVG/Content_type","List-of-Ts") }}
Exemplo
<html>
<body>
<svg width="120" height="220"
viewPort="0 0 120 120" version="1.1"
xmlns="http://www.w3.org/2000/svg">
<style type="text/css" >
<![CDATA[
rect.rectClass {
stroke: #000066;
fill: #00cc00;
}
circle.circleClass {
stroke: #006600;
fill: #cc0000;
}
]]>
</style>
<rect class="rectClass" x="10" y="10" width="100" height="100"/>
<circle class="circleClass" cx="40" cy="50" r="26"/>
</svg>
</body></html>Elementos
Os seguintes elementos podem utilizar o atributo class:
<a><altGlyph><circle><clipPath>(en-US)<defs><desc><ellipse><feBlend>(en-US)<feColorMatrix>(en-US)<feComponentTransfer>(en-US)<feComposite>(en-US)<feConvolveMatrix>(en-US)<feDiffuseLighting>(en-US)<feDisplacementMap>(en-US)<feFlood>(en-US)<feGaussianBlur>(en-US)<feImage>(en-US)<feMerge>(en-US)<feMorphology>(en-US)<feOffset>(en-US)<feSpecularLighting>(en-US)<feTile>(en-US)<feTurbulence>(en-US)<filter><font>(en-US)<foreignObject>(en-US)<g><glyph><glyphRef><image><line><linearGradient><marker><mask><missing-glyph><path><pattern><polygon><polyline><radialGradient><rect><stop><svg><switch><symbol><text><textPath><title><tref><tspan><use>
Compatibilidade com navegadores
Estamos convertendo nossos dados de compatibilidade para o formato JSON.
Esta tabela de compatibilidade ainda usa o formato antigo,
pois ainda não convertemos os dados que ela contém.
Descubra como você pode ajudar! (en-US)
| Recurso | Chrome | Firefox (Gecko) | Internet Explorer | Opera | Safari |
|---|---|---|---|---|---|
| Suporte básico | (yes) | (Yes) | ? | ? | ? |
| Suporte à animação | ? | 5 (5) | ? | ? | ? |
| Recurso | Android | Firefox Mobile (Gecko) | IE Mobile | Opera Mobile | Safari Mobile |
|---|---|---|---|---|---|
| Suporte básico | ? | ? | ? | ? | ? |