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 |
Exemplo
<html>
<body>
<svg width="120" height="220"
viewPort="0 0 120 120" version="1.1"
xmlns="https://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
BCD tables only load in the browser