class

« SVG属性值主页

给一个元素设置一个或一组class名称，也可将同一class名称赋给多个元素。如果你如上所述给一个元素设置多个class名称，记得使用空格来分隔它们。

一个元素的class名称有以下两个主要作用:

  • 作为元素选择器, 提供给开发者使用css来给特定一个或一组元素增加样式信息的能力.
  • 兼容浏览器渲染特性.

class允许你通过CSS来设置SVG内容的样式.

使用方法

种类 无
值 <list-of-class-names>
支持动画 支持
规范文档 SVG 1.1 (2nd Edition): The class attribute

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.

用法示例

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

元素

下面列出的元素可以使用class属性:

 

浏览器兼容性

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari
基础功能支持能力 (Yes) (Yes) ? ? ?
动画功能支持能力 ? 5 (5) ? ? ?
Feature Android Firefox Mobile (Gecko) IE Mobile Opera Mobile Safari Mobile
基础功能支持能力 ? ? ? ? ?

 

文档标签和贡献者