class

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

为元素分配类名或一组类名。您可以将相同的类名或类名分配给任意数量的元素，但是，多个类名必须用空格字符分隔。

元素的类名起着两个关键作用：

作为样式表选择器，当作者为一组元素分配样式信息时。
供浏览器通用使用。

您可以使用此 class 来使用 CSS 为 SVG 内容设置样式。

使用语境

分类	None
值	<class-names-list>
可动画的	是

示例

html

<html lang="en">
  <body>
    <svg
      width="120"
      height="220"
      viewPort="0 0 120 120"
      version="1.1"
      xmlns="http://www.w3.org/2000/svg">
      <style>
        <![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 属性：

规范

规范
Scalable Vector Graphics (SVG) 2 # ElementSpecificStyling

浏览器兼容性

帮助改进 MDN

了解如何贡献

此页面最后修改于 2025年6月7日，由 MDN 贡献者进行编辑。

在 GitHub 上查看此页面 • 报告此内容的某个问题