We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

这篇翻译不完整。请帮忙从英语翻译这篇文章

« 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属性:

 

浏览器兼容性

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!

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

 

文档标签和贡献者

标签: 
此页面的贡献者: ObooChin
最后编辑者: ObooChin,