« 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

List-of-Ts

<list-of-Ts>

(Where T is some type.) A list consists of a separated sequence of values. Unless explicitly described differently, lists within SVG's XML attributes can be either comma-separated, with optional white space before or after the comma, or white space-separated.

White space in lists is defined as one or more of the following consecutive characters: "space" (U+0020), "tab" (U+0009), "line feed" (U+000A), "carriage return" (U+000D) and "form-feed" (U+000C).

The following is a template for an EBNF grammar describing the <list-of-Ts> syntax:

list-of-Ts ::= T
               | T, list-of-Ts

Within the SVG DOM, values of a <list-of-Ts> type are represented by an interface specific for the particular type T. For example, a <list-of-lengths> is represented in the SVG DOM using an SVGLengthList or SVGAnimatedLengthList object.

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:

Compatibilidade dos navegadores

We're converting our compatibility data into a machine-readable JSON format. This compatibility table still uses the old format, because we haven't yet converted the data it contains. Find out how you can help!

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 ? ? ? ? ?

 

Etiquetas do documento e colaboradores

Colaboradores desta página: caio
Última atualização por: caio,