class
        
        
          
                Baseline
                
                  Widely available
                
                
              
        
        
        
          
                
              
                
              
                
              
        
        
      
      This feature is well established and works across many devices and browser versions. It’s been available across browsers since julho de 2015.
« 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
<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><defs><desc><ellipse><feBlend><feColorMatrix><feComponentTransfer><feComposite><feConvolveMatrix><feDiffuseLighting><feDisplacementMap><feFlood><feGaussianBlur><feImage><feMerge><feMorphology><feOffset><feSpecularLighting><feTile><feTurbulence><filter><font><foreignObject><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
Loading…