Spec-Zone.ru › SVG

Тип содержимого

SVG использует ряд типов данных. В этой статье перечислены эти типы вместе с их синтаксисом и описаниями того, для чего они используются.

Угол

<угол>

Углы задаются одним из двух способов. При использовании в значении свойства в таблице стилей <угол> определяется следующим образом:

angle ::= number (~"deg" | ~"grad" | ~"rad")?

где deg обозначает градусы, grad обозначает грады и rad обозначает радианы.

Для свойств, определенных в CSS2, должен быть указан идентификатор единицы измерения угла. Для свойств, специфичных для SVG, и соответствующих атрибутов представления единица измерения угла необязательна. Если она не указана, значение угла считается заданным в градусах. В атрибутах представления для всех свойств, будь то в SVG1.1 или CSS2, идентификатор единицы измерения, если указан, должен быть в нижнем регистре.

При использовании углов в атрибуте SVG, <угол> определяется следующим образом:

angle ::= number ("deg" | "grad" | "rad")?

Идентификаторы единиц измерения в таких значениях <угол> должны быть в нижнем регистре.

В DOM SVG значения <угол> представляются с помощью SVGAngle или SVGAnimatedAngle объектов.

Любое значение

<любое_значение>

Базовый тип <любое_значение> представляет собой последовательность нуля или более символов. В частности:

anything ::= Char*

где Char - это производство для символа, как определено в XML 1.0, раздел 2.2.

Значение часов

<значение_часов>

Значения часов имеют тот же синтаксис, что и в спецификации SMIL Animation. Грамматика значений часов повторяется здесь:

Clock-val         ::= Full-clock-val | Partial-clock-val
                      | Timecount-val
Full-clock-val    ::= Hours ":" Minutes ":" Seconds ("." Fraction)?
Partial-clock-val ::= Minutes ":" Seconds ("." Fraction)?
Timecount-val     ::= Timecount ("." Fraction)? (Metric)?
Metric            ::= "h" | "min" | "s" | "ms"
Hours             ::= DIGIT+; any positive number
Minutes           ::= 2DIGIT; range from 00 to 59
Seconds           ::= 2DIGIT; range from 00 to 59
Fraction          ::= DIGIT+
Timecount         ::= DIGIT+
2DIGIT            ::= DIGIT DIGIT
DIGIT             ::= [0-9]

Для Timecount значений, стандартный суффикс измерения — "s" (для секунд). В значениях часов не допускается вложенный пробел, хотя начальные и конечные пробелы будут проигнорированы.

Ниже приведены примеры допустимых значений часов:

  • Полные значения часов:
    • 02:30:03 = 2 часа, 30 минут и 3 секунды
    • 50:00:10.25 = 50 часов, 10 секунд и 250 миллисекунд
  • Частичное значение часов:
    • 02:33 = 2 минуты и 33 секунды
    • 00:10.5 = 10,5 секунд = 10 секунд и 500 миллисекунд
  • Значения временного отсчета:
    • 3.2h = 3,2 часа = 3 часа и 12 минут
    • 45min = 45 минут
    • 30s = 30 секунд
    • 5ms = 5 миллисекунд
    • 12.467 = 12 секунд и 467 миллисекунд
  • Дробные значения — это просто (десятичные) плавающие точки, определяющие секунды. Таким образом:
    • 00.5s = 500 миллисекунд
    • 00:00.005 = 5 миллисекунд

Цвет

<цвет>

Базовый тип <цвет> — это совместимая с CSS2 спецификация цвета в цветовом пространстве sRGB. <цвет> применяется к использованию SVG атрибута color и является частью определений атрибутов fill, stroke, stop-color, flood-color, и lighting-color, которые также предлагают необязательные цветовые спецификации на основе ICC.

SVG поддерживает все альтернативные синтаксические конструкции для <цвет>, определенные в синтаксисе CSS2 и базовых типах данных, и (в зависимости от реализации) в будущем CSS Color Module Level 3.

Цвет <цвет> — это либо ключевое слово, либо числовое RGB-значение.

В дополнение к этим ключевым словам цвета пользователи могут указать ключевые слова, соответствующие цветам, используемым объектами в среде пользователя. Нормативное определение этих ключевых слов приведено в предпочтениях пользователей для цветов (CSS2, раздел 18.2).

Формат RGB-значения в шестнадцатеричном представлении — это "#", за которым следуют три или шесть шестнадцатеричных символов. Трёхзначное RGB-представление (#rgb) преобразуется в шестизначное (#rrggbb) путём дублирования цифр, а не добавления нулей. Например, #fb0 расширяется до #ffbb00. Это гарантирует, что белый цвет (#ffffff) может быть указан с коротким представлением (#fff) и исключает зависимость от глубины цвета дисплея. Формат RGB-значения в функциональной записи — это функция RGB, за которой следует список из трёх числовых значений (либо три целых значения, либо три процентных значения), заключённых в ")". Функция RGB — это нечувствительная к регистру строка "rgb(", например "RGB(" или "rGb(". Для совместимости предпочтительна форма со всеми строчными буквами "rgb(". Целое значение 255 соответствует 100%, и F или FF в шестнадцатеричном представлении: rgb(255 255 255) = rgb(100% 100% 100%) = #FFF. Пробелы допускаются вокруг числовых значений. Все RGB-цвета задаются в цветовом пространстве sRGB. Использование sRGB обеспечивает недвусмысленное и объективно измеримое определение цвета, которое может быть связано с международными стандартами.

color    ::= "#" hexdigit hexdigit hexdigit (hexdigit hexdigit hexdigit)?
              | "rgb("integer integer integer")"
              | "rgb("integer "%" integer "%" integer "%)"
              | color-keyword
hexdigit ::= [0-9A-Fa-f]

где color-keyword соответствует (без учёта регистра) одному из цветовых ключевых слов, перечисленных в CSS Color Module Level 3, или одному из ключевых слов системного цвета, перечисленных в предпочтениях пользователей для цветов (CSS2, раздел 18.2).

Координата

<координата>

Координата <координата> — это длина в системе координат пользователя, которая задаёт расстояние от начала системы координат пользователя вдоль соответствующей оси (ось X для координат X, ось Y для координат Y). Её синтаксис совпадает с синтаксисом <длины>.

В DOM SVG <координата> представляется как SVGLength или SVGAnimatedLength.

Частота

<частота>

Значения частоты используются с акустическими свойствами. Как определено в CSS2, значение частоты — это <число>, за которым следует идентификатор единицы измерения частоты. Идентификаторы единиц измерения частоты:

  • Hz: Герц
  • kHz: Килогерц

Значения частоты не могут быть отрицательными.

FuncIRI

<FuncIRI>

Функциональная запись для ссылки. Синтаксис этой ссылки такой же, как у CSS URI.

Целое число

<целое_число>

Целое число <целое_число> задаётся как необязательный знак (+ или -) и последующими одной или более цифрами 0 по 9:

integer ::= [+-]? [0-9]+

Если знак отсутствует, число неотрицательное.

Если не указано иное для конкретного атрибута или свойства, диапазон значений <целое_число> включает в себя (как минимум) -2147483648 по 2147483647.

В DOM SVG целое число <целое_число> представляется как number или SVGAnimatedInteger.

END_OF_DOCUMENT_MARKER

IRI

<IRI>

Идентификатор Ресурса Интернет-пространства.

В Интернете ресурсы идентифицируются с помощью IRI (интернационализированных идентификаторов ресурсов). Например, файл SVG с именем someDrawing.svg по адресу http://example.com может иметь следующий IRI:

http://example.com/someDrawing.svg

IRI также может указывать на конкретный элемент в документе XML, включив в него фрагмент идентификатора IRI. IRI, включающий фрагмент идентификатора IRI, состоит из необязательного базового IRI, за которым следует символ "#", а затем фрагмент идентификатора IRI. Например, следующий IRI может использоваться для указания элемента с идентификатором "Lamppost" в файле someDrawing.svg:

http://example.com/someDrawing.svg#Lamppost

IRI используются в атрибуте href. Некоторые атрибуты допускают как IRI, так и текстовые строки в качестве содержимого. Для разграничения текстовой строки от относительного IRI используется функциональная запись <FuncIRI>. Это IRI, ограниченный функциональной записью. Примечание: по историческим причинам разделителями являются "url(" и ")" для совместимости со спецификациями CSS. Форма FuncIRI используется в атрибутах презентации.

SVG широко использует ссылки IRI, как абсолютные, так и относительные, на другие объекты. Например, чтобы заполнить прямоугольник линейным градиентом, сначала определите элемент <linearGradient> и присвойте ему идентификатор, как в примере:

html
<linearGradient xml:id="MyGradient">...</linearGradient>

Затем вы ссылаетесь на линейный градиент как на значение атрибута fill для прямоугольника, как в следующем примере:

html
<rect fill="url(#MyGradient)" />

SVG поддерживает два типа ссылок IRI:

  • локальные ссылки IRI, где ссылка IRI не содержит <absoluteIRI> или <relativeIRI> и, следовательно, содержит только фрагмент идентификатора (т.е., #<elementID> или #xpointer(id<elementID>)).
  • нелокальные ссылки IRI, где ссылка IRI содержит <absoluteIRI> или <relativeIRI>. Полная спецификация ссылок IRI в SVG приведена в SVG 1.1 (2-е издание): ссылки IRI.

Длина

<length>

Длина — это измерение расстояния, заданное числом вместе с единицей измерения. Спецификация SVG2 соответствует типам данных и единицам измерения CSS <length> для синтаксиса атрибутов и значений. Должен быть указан идентификатор единицы измерения длины, и значения идентификаторов единиц измерения не зависят от регистра. Синтаксис следует синтаксису CSS <length>:

length ::= <number> (<absolute-length> | <relative-length>)?

Для свойств SVG, определенных в SVG1.1, и их соответствующих атрибутов презентации идентификаторы единиц измерения в значениях необязательны. Если они не указаны, значение длины представляет расстояние в текущей системе координат пользователя. Идентификаторы единиц измерения должны быть в нижнем регистре, когда они используются в атрибутах презентации для всех свойств, независимо от того, определены ли они в SVG или в CSS. Эта чувствительность к регистру смягчается в SVG2, чтобы соответствовать CSS.

Обратите внимание, что определение <length> также допускает идентификатор единицы измерения процентов (%). Значение длины в процентах зависит от атрибута, для которого указано это значение. Два распространенных случая:

  • когда значение длины в процентах представляет собой процент от ширины или высоты области просмотра
  • когда значение длины в процентах представляет собой процент от ширины или высоты ограничивающей рамки данного объекта.

В SVG DOM значения <length> представлены с помощью объектов SVGLength или SVGAnimatedLength.

Список значений Ts

<list-of-Ts>

(Где T — некоторый тип.) Список состоит из последовательности значений, разделенных разделителями. Если не указано иное, списки в атрибутах XML SVG могут быть разделены запятыми (с необязательным пробелом перед или после запятой) или пробелами.

Пробелы в списках определяются как один или несколько из следующих последовательных символов: "пробел" (U+0020), "табуляция" (U+0009), "перевод строки" (U+000A), "возврат каретки" (U+000D), и "форма подачи" (U+000C).

Следующий шаблон описывает синтаксис <list-of-Ts> с помощью грамматики EBNF:

list-of-Ts ::= T
                | T, list-of-Ts

В SVG DOM значения типа <list-of-Ts> представлены интерфейсом, специфичным для конкретного типа T. Например, <list-of-lengths> в SVG DOM представлен объектом SVGLengthList или SVGAnimatedLengthList.

Имя

<name>

Имя — это строка, в которой запрещено несколько символов с синтаксической значимостью.

name  ::= [^,()#x20#x9#xD#xA] /* any char except ",", "(", ")" or wsp */

Число

<number>

Вещественные числа задаются одним из двух способов. При использовании в таблице стилей <number> определяется следующим образом:

number ::= integer
            | [+-]? [0-9]* "." [0-9]+

Этот синтаксис соответствует определению в CSS (CSS2, раздел 4.3.1).

При использовании в атрибуте SVG <number> определяется по-другому, чтобы числа с большими величинами можно было указывать более лаконично:

number ::= integer ([Ee] integer)?
            | [+-]? [0-9]* "." [0-9]+ ([Ee] integer)?

В SVG DOM <number> представляется как число с плавающей точкой, SVGNumber или SVGAnimatedNumber.

Число-необязательное-число

<number-optional-number>

Пара <number>, где второе <number> необязательно.

number-optional-number ::= number
                            | number, number

В SVG DOM <number-optional-number> представлено парой SVGAnimatedInteger или SVGAnimatedNumber объектов.

Значение непрозрачности

<opacity-value>

Непрозрачность цвета или содержимого, с которым заполнен текущий объект, как <number>. Любые значения вне диапазона 0.0 (полностью прозрачный) до 1.0 (полностью непрозрачный) будут ограничены этим диапазоном.

Заливка

<paint>

Значения для свойств fill и stroke определяют тип заливки, который необходимо использовать при заполнении или обводке заданного графического элемента. Доступные варианты и синтаксис для <paint>:

paint ::= none | <color> | <url> [none | <color>]? | context-fill | context-stroke

Значения context-fill и context-stroke позволяют наследоваться значения в элементах маркер и использование.

Процент

<percentage>

Проценты задаются числом, за которым следует символ "%":

percentage ::= number "%"

Обратите внимание, что определение <number> зависит от того, задан ли процент в таблице стилей или в атрибуте, который не является также атрибутом презентации.

Процентные значения всегда относительны к другому значению (например, длине). Каждый атрибут или свойство, допускающее проценты, также определяет базовое измерение расстояния, к которому относится процент.

В SVG DOM <percentage> представляется с помощью объекта SVGNumber или SVGAnimatedNumber.

Время

<time>

Значение времени — это <number>, за которым следует идентификатор единицы времени. Идентификаторы единиц времени:

  • ms: миллисекунды
  • s: секунды

Список преобразований

<transform-list>

Список преобразований <transform-list> используется для указания списка преобразований системы координат. Подробное описание возможных значений для <transform-list> приведено в определении атрибута transform.

В SVG DOM значение <transform-list> представляется с помощью объекта SVGTransformList или SVGAnimatedTransformList.

END_OF_DOCUMENT_MARKER

URL

URL

Унифицированный ресурсный указатель.

URL — это последовательность символов Unicode, формирующая адрес внутреннего или внешнего ресурса.

До SVG 2 вместо него использовался более ограниченный тип содержимого IRI, так как спецификация URL не была стандартизирована ранее.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/SVG/Content_type

Spec-Zone.ru

Настройки Оффлайн Что нового Помощь О нас
Spec-Zone .ru
спецификации, руководства, описания, API