class

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since January 2020.

We'd love to hear more about your role and the company you work for
Please help us by answering a few questions.

« Домашняя страница справочника по SVG атрибутам

Присвоение класса или набора классов элементу. Вы можете присвоить одинаковые классы/наборы классов любому количеству элементов. Если вы указываете(присваиваете) несколько имён классов, они должны быть разделены символом "пробел".

Класс элемента имеет 2 ключевые роли:

  • Селектор таблицы стилей, для использования когда автор желает стилизировать набор(несколько) элементов.
  • Для общих целей Броузера.

Класс может быть использован для стилизации SVG содержимого используя CSS.

Контекст использования

Категория None
Значение <list-of-class-names>
Возможна анимация Yes
Нормативный документ SVG 1.1 (2nd Edition): The class attribute

Example

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

:<a>

Совместимость с браузерами