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.

« Домашняя страница справочника по 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>

Элементы

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

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
class
Animation support

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support