SVGLength

Базовая Широко доступна

Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.

Интерфейс SVG длины

Интерфейс SVGLength соответствует базовому типу данных <length>.

Объект SVGLength может быть обозначен как только для чтения, что означает, что попытки изменить объект приведут к выбросу исключения.

Обзор интерфейса

Также реализует	Нет
Методы	`void newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)` `void convertToSpecifiedUnits(in unsigned short unitType)`
Свойства	только для чтения unsigned short `unitType` float `value` float `valueInSpecifiedUnits` строка `valueAsString`
Константы	`SVG_LENGTHTYPE_UNKNOWN` = `0` `SVG_LENGTHTYPE_NUMBER` = `1` `SVG_LENGTHTYPE_PERCENTAGE` = `2` `SVG_LENGTHTYPE_EMS` = `3` `SVG_LENGTHTYPE_EXS` = `4` `SVG_LENGTHTYPE_PX` = `5` `SVG_LENGTHTYPE_CM` = `6` `SVG_LENGTHTYPE_MM` = `7` `SVG_LENGTHTYPE_IN` = `8` `SVG_LENGTHTYPE_PT` = `9` `SVG_LENGTHTYPE_PC` = `10`
Нормативный документ	SVG 1.1 (2-е издание)

Пример

<svg height="200" onload="start();" version="1.1" width="200" xmlns="http://www.w3.org/2000/svg">
  <script><![CDATA[
function start() {
  const rect = document.getElementById("myRect");
  const val  = rect.x.baseVal;

  // read x in pixel and cm units
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits: " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  // set x = 20pt and read it out in pixel and pt units
  val.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PT, 20);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);

  // convert x = 20pt to inches and read out in pixel and inch units
  val.convertToSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_IN);
  console.log("value: " + val.value +
            ", valueInSpecifiedUnits " + val.unitType + ": " + val.valueInSpecifiedUnits +
            ", valueAsString: " + val.valueAsString);
}
]]></script>
  <rect id="myRect"
        x="1cm" y="1cm"
        fill="green" stroke="black" stroke-width="1"
        width="1cm" height="1cm"
  />
</svg>

Результаты на мониторе настольного компьютера (единицы пикселей будут зависеть от dpi):

value: 37.7952766418457, valueInSpecifiedUnits: 6: 1, valueAsString: 1cm
value: 26.66666603088379, valueInSpecifiedUnits 9: 20, valueAsString: 20pt
value: 26.66666603088379, valueInSpecifiedUnits 8: 0.277777761220932, valueAsString: 0.277778in

Константы

Имя	Значение	Описание
`SVG_LENGTHTYPE_UNKNOWN`	`0`	Тип единицы не является одним из предопределённых типов единиц. Недопустимо пытаться определить новое значение этого типа или переключать существующее значение на этот тип.
`SVG_LENGTHTYPE_NUMBER`	`1`	Тип единицы не был предоставлен (т. е. было указано значение без единиц), что указывает на значение в пользовательских единицах.
`SVG_LENGTHTYPE_PERCENTAGE`	`2`	Было указано процентное значение.
`SVG_LENGTHTYPE_EMS`	`3`	Значение было указано с использованием единиц em, определённых в CSS2.
`SVG_LENGTHTYPE_EXS`	`4`	Значение было указано с использованием единиц ex, определённых в CSS2.
`SVG_LENGTHTYPE_PX`	`5`	Значение было указано с использованием единиц px, определённых в CSS2.
`SVG_LENGTHTYPE_CM`	`6`	Значение было указано с использованием единиц cm, определённых в CSS2.
`SVG_LENGTHTYPE_MM`	`7`	Значение было указано с использованием единиц mm, определённых в CSS2.
`SVG_LENGTHTYPE_IN`	`8`	Значение было указано с использованием единиц in, определённых в CSS2.
`SVG_LENGTHTYPE_PT`	`9`	Значение было указано с использованием единиц pt, определённых в CSS2.
`SVG_LENGTHTYPE_PC`	`10`	Значение было указано с использованием единиц pc, определённых в CSS2.

Свойства экземпляра

Имя	Тип	Описание
`unitType`	unsigned short	Тип значения, как указано одной из констант `SVG_LENGTHTYPE_*` , определённых в этом интерфейсе.
`value`	float	Значение в виде числового значения с плавающей запятой в пользовательских единицах. Установка этого атрибута автоматически обновит `valueInSpecifiedUnits` и `valueAsString`. Исключения при установке: исключение `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` генерируется, когда длина соответствует атрибуту только для чтения или когда сам объект только для чтения.
`valueInSpecifiedUnits`	float	Значение в виде числового значения с плавающей запятой в единицах, указанных в `unitType`. Установка этого атрибута автоматически обновит `value` и `valueAsString`. Исключения при установке: исключение `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` генерируется, когда длина соответствует атрибуту только для чтения или когда сам объект только для чтения.
`valueAsString`	строка	Значение в виде строкового значения в единицах, указанных в `unitType`. Установка этого атрибута автоматически обновит `value`, `valueInSpecifiedUnits`, и `unitType`. Исключения при установке: исключение `DOMException` с кодом `SYNTAX_ERR` генерируется, если назначенная строка не может быть обработана как допустимое значение <length>. исключение `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` генерируется, когда длина соответствует атрибуту только для чтения или когда сам объект только для чтения.

Методы экземпляра

Имя и аргументы Возврат Описание

Имя и аргументы	Возврат	Описание
`newValueSpecifiedUnits(in unsigned short unitType, in float valueInSpecifiedUnits)`	`void`	Сброс значения в виде числа с сопутствующим типом единицы, заменяя значения всех атрибутов объекта. Исключения: исключение `DOMException` с кодом `NOT_SUPPORTED_ERR` генерируется, если `unitType` имеет значение `SVG_LENGTHTYPE_UNKNOWN` или не является допустимой константой типа единицы (одной из других констант `SVG_LENGTHTYPE_*` , определённых в этом интерфейсе). исключение `DOMException` с кодом `NO_MODIFICATION_ALLOWED_ERR` генерируется, когда длина соответствует атрибуту только для чтения или когда сам объект только для чтения.
`convertToSpecifiedUnits(in unsigned short unitType)`	`void`	Сохраняет то же базовое сохранённое значение, но сбрасывает идентификатор сохранённой единицы на заданное значение `unitType`. Атрибуты объекта `unitType`, `valueInSpecifiedUnits`, и `valueAsString` могут быть изменены в результате этого метода. Например, если исходное значение было `"0.5cm"` и метод был вызван для преобразования в миллиметры, то `unitType` будет изменено на `SVG_LENGTHTYPE_MM`, `valueInSpecifiedUnits` будет изменено на числовое значение `5`, и `valueAsString` будет изменено на `"5mm"`.

newValueSpecifiedUnits(in unsigned short
          unitType, in float valueInSpecifiedUnits)

void

Сброс значения в виде числа с сопутствующим типом единицы, заменяя значения всех атрибутов объекта.

Исключения:

исключение DOMException с кодом NOT_SUPPORTED_ERR генерируется, если unitType имеет значение SVG_LENGTHTYPE_UNKNOWN или не является допустимой константой типа единицы (одной из других констант SVG_LENGTHTYPE_* , определённых в этом интерфейсе).
исключение DOMException с кодом NO_MODIFICATION_ALLOWED_ERR генерируется, когда длина соответствует атрибуту только для чтения или когда сам объект только для чтения.

convertToSpecifiedUnits(in unsigned short unitType) void Сохраняет то же базовое сохранённое значение, но сбрасывает идентификатор сохранённой единицы на заданное значение unitType. Атрибуты объекта unitType, valueInSpecifiedUnits, и valueAsString могут быть изменены в результате этого метода. Например, если исходное значение было "0.5cm" и метод был вызван для преобразования в миллиметры, то unitType будет изменено на SVG_LENGTHTYPE_MM, valueInSpecifiedUnits будет изменено на числовое значение 5, и valueAsString будет изменено на "5mm".

Спецификации

Спецификация
Scalable Vector Graphics (SVG) 2 # InterfaceSVGLength

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

	Рабочий стол					Мобильный
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox для Android	Opera Android	Safari на IOS	Samsung Internet	WebView Android
`SVGLength`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`convertToSpecifiedUnits`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`newValueSpecifiedUnits`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`unitType`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`value`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`valueAsString`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37
`valueInSpecifiedUnits`	1	12	1.5	≤12.1	3	18	4	≤12.1	1	1.0	≤37

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