SVGSVGElement
Базовая Широко поддерживается *
Эта функция хорошо зарекомендовала себя и работает на многих устройствах и версиях браузеров. Она доступна в браузерах с января 2020 года.
* Некоторые части этой функции могут иметь различный уровень поддержки.
Интерфейс SVGSVGElement предоставляет доступ к свойствам элементов <svg>, а также методы для их управления. Этот интерфейс также содержит различные вспомогательные методы общего использования, такие как операции с матрицами и возможность управления временем перерисовки на устройствах визуального отображения.
Свойства экземпляра
Этот интерфейс также наследует свойства от своего родителя, SVGGraphicsElement.
-
SVGSVGElement.xТолько для чтения -
Анимационное
SVGAnimatedLengthзначение, соответствующее атрибутуxзаданного элемента<svg>. -
SVGSVGElement.yТолько для чтения -
Анимационное
SVGAnimatedLengthзначение, соответствующее атрибутуyзаданного элемента<svg>. -
SVGSVGElement.widthТолько для чтения -
Анимационное
SVGAnimatedLengthзначение, соответствующее атрибутуwidthзаданного элемента<svg>. -
SVGSVGElement.heightТолько для чтения -
Анимационное
SVGAnimatedLengthзначение, соответствующее атрибутуheightзаданного элемента<svg>. -
SVGSVGElement.pixelUnitToMillimeterXУстаревшее -
Число с плавающей точкой, представляющее размер пикселя (как определено в CSS2) вдоль оси x области просмотра, что соответствует значению где-то в диапазоне от 70 dpi до 120 dpi. В системах, поддерживающих это, оно может фактически соответствовать характеристикам целевого носителя. В системах, где невозможно определить размер пикселя, используется подходящее значение по умолчанию.
-
SVGSVGElement.pixelUnitToMillimeterYУстаревшее -
Число с плавающей точкой, представляющее размер пикселя вдоль оси y области просмотра.
-
SVGSVGElement.screenPixelToMillimeterXУстаревшее -
События пользовательского интерфейса (UI) в DOM Level 2 указывают координаты экрана, в которых произошло данное событие UI. Когда браузер фактически знает физический размер «единицы экрана», этот атрибут с плавающей точкой отражает эту информацию; в противном случае пользовательские агенты предоставляют подходящее значение по умолчанию (например,
.28mm). -
SVGSVGElement.screenPixelToMillimeterYУстаревшее -
Соответствующий размер пикселя экрана по оси y области просмотра.
-
SVGSVGElement.useCurrentViewУстаревшее Нестандартный -
Начальный вид (т.е., до масштабирования и перемещения) текущего внутреннего фрагмента документа SVG может быть либо «стандартным», т.е., основанным на атрибутах элемента
<svg>, таких какviewBox, либо на «пользовательском» виде (т.е., гиперссылка на определённый элемент<view>или другой элемент). Если начальный вид «стандартный», то этот атрибутfalse. Если начальный вид «пользовательский», то этот атрибутtrue. -
SVGSVGElement.currentViewУстаревшее Нестандартный -
Объект
SVGViewSpec, определяющий начальный вид (т.е., до масштабирования и перемещения) текущего внутреннего фрагмента документа SVG. Значение зависит от ситуации: Если начальный вид был «стандартным», то:- значения для
viewBox,preserveAspectRatioиzoomAndPanвнутриcurrentViewбудут соответствовать значениям соответствующих атрибутов DOM, которые находятся вSVGSVGElementнапрямую - значение для
transformвнутриcurrentViewбудетnull
Если начальный вид был ссылкой на элемент
<view>, то:- значения для
viewBox,preserveAspectRatioиzoomAndPanвнутриcurrentViewбудут соответствовать соответствующим атрибутам данного элемента<view> - значение для
transformвнутриcurrentViewбудетnull
Если начальный вид был ссылкой на другой элемент (кроме
<view>), то:- значения для
viewBox,preserveAspectRatioиzoomAndPanвнутриcurrentViewбудут соответствовать значениям соответствующих атрибутов DOM, которые находятся вSVGSVGElementнапрямую для ближайшего предка элемента<svg> - значение для
transformвнутриcurrentViewбудетnull
Если начальный вид был ссылкой на фрагмент документа SVG с использованием идентификатора фрагмента спецификации просмотра SVG (т.е.,
#svgView(…)), то:- значения для
viewBox,preserveAspectRatio,zoomAndPan,transformвнутриcurrentViewбудут соответствовать значениям из идентификатора фрагмента спецификации просмотра SVG
- значения для
SVGSVGElement.currentScale-
В элементе
<svg>, этот атрибут с плавающей точкой указывает текущий коэффициент масштабирования относительно начального вида, учитывая операции масштабирования и перемещения пользователя. Атрибуты DOMcurrentScaleиcurrentTranslateэквивалентны 2×3 матрице[a b c d e f] = [currentScale 0 0 currentScale currentTranslate.x currentTranslate.y]. Если включено «масштабирование» (т.е.,zoomAndPan="magnify"), эффект заключается в том, что дополнительное преобразование размещается на самом внешнем уровне фрагмента документа SVG (т.е., вне самого внешнего элемента<svg>). -
SVGSVGElement.currentTranslateТолько для чтения -
Объект
SVGPoint, представляющий коэффициент смещения, учитывающий операции пользователя по «масштабированию», соответствующий самому внешнему элементу<svg>. Поведение не определено для элементов<svg>, которые не находятся на самом внешнем уровне.
Методы экземпляра
Этот интерфейс также наследует методы от своего родителя, SVGGraphicsElement.
-
SVGSVGElement.suspendRedraw()Устаревший -
Принимает значение таймаута, которое указывает, что перерисовка не должна происходить до:
выполнения соответствующего
unsuspendRedraw()вызова, выполненияunsuspendRedrawAll()вызова или истечения таймера.В средах, не поддерживающих интерактивность (например, печать), перерисовка не будет приостановлена. Вызовы
suspendRedraw()иunsuspendRedraw()должны, но не обязаны, выполняться в парных вызовах.Чтобы приостановить действия перерисовки при выполнении набора изменений в SVG DOM, необходимо выполнить вызов метода, подобный следующему:
const suspendHandleID = suspendRedraw(maxWaitMilliseconds);
и после изменений выполнить вызов метода, подобный следующему:
unsuspendRedraw(suspendHandleID);
Обратите внимание, что несколько вызовов
suspendRedraw()могут использоваться одновременно, и каждый такой вызов обрабатывается независимо от других вызовов методаsuspendRedraw(). -
SVGSVGElement.unsuspendRedraw()Устаревший -
Отменяет указанный
suspendRedraw(), предоставив уникальный идентификатор обработчика приостановки, возвращённый предыдущим вызовомsuspendRedraw(). -
SVGSVGElement.unsuspendRedrawAll()Устаревший -
Отменяет все активные вызовы метода
suspendRedraw(). Этот метод наиболее полезен в конце набора вызовов SVG DOM для того, чтобы убедиться, что все ожидающие вызовы методаsuspendRedraw()были отменены. -
SVGSVGElement.forceRedraw()Устаревший -
В средах рендеринга, поддерживающих интерактивность, заставляет пользовательский агент немедленно перерисовать все области области просмотра, требующие обновления.
SVGSVGElement.pauseAnimations()-
Приостанавливает (т.е., останавливает) все выполняющиеся в настоящее время анимации, определенные внутри фрагмента SVG документа, соответствующего этому элементу
<svg>, заставляя таймер анимаций соответствующего фрагмента документа остановиться, пока он не будет возобновлён. SVGSVGElement.unpauseAnimations()-
Возобновляет (т.е., возобновляет) текущие анимации, определённые внутри фрагмента SVG документа, заставляя таймер анимаций продолжить работу от времени, на котором он был приостановлен.
SVGSVGElement.animationsPaused()-
Возвращает
trueесли этот фрагмент SVG документа находится в состоянии паузы. SVGSVGElement.getCurrentTime()-
Возвращает текущее время в секундах, отнесённое к началу текущего фрагмента SVG документа. Если
getCurrentTime()вызывается до начала временной шкалы документа (например, скриптом, выполняемым в элементе<script>до того, как событиеSVGLoadдокумента было отправлено), то возвращается0. SVGSVGElement.setCurrentTime()-
Корректирует часы для этого фрагмента SVG документа, устанавливая новое текущее время. Если
setCurrentTime()вызывается до начала временной шкалы документа (например, скриптом, выполняемым в элементе<script>до того, как событиеSVGLoadдокумента было отправлено), то значение секунд в последнем вызове метода задаёт время, к которому документ будет переведён, после того, как начнется временная шкала документа. SVGSVGElement.getIntersectionList()-
Возвращает
NodeListэлементов графики, содержимое которых пересекается с заданным прямоугольником. Каждый кандидатный графический элемент считается совпадением только в том случае, если тот же графический элемент может быть целевым для событий указания, как определено вpointer-eventsобработке. SVGSVGElement.getEnclosureList()-
Возвращает
NodeListграфических элементов, чьё рендерное содержимое полностью содержится в заданном прямоугольнике. Каждый кандидатный графический элемент рассматривается как совпадение только в том случае, если тот же графический элемент может быть целевым для событий указания, как определено вpointer-eventsобработке. SVGSVGElement.checkIntersection()-
Возвращает
trueесли рендерное содержимое данного элемента пересекается с заданным прямоугольником. Каждый кандидатный графический элемент считается совпадением только в том случае, если тот же графический элемент может быть целевым для событий указания, как определено вpointer-eventsобработке. SVGSVGElement.checkEnclosure()-
Возвращает
trueесли рендерное содержимое данного элемента полностью содержится в заданном прямоугольнике. Каждый кандидатный графический элемент считается совпадением только в том случае, если тот же графический элемент может быть целевым для событий указания, как определено вpointer-eventsобработке. SVGSVGElement.deselectAll()-
Снимает выделение с любых выделенных объектов, включая выделения текстовых строк и областей ввода.
SVGSVGElement.createSVGNumber()-
Создаёт объект
SVGNumberвне любых деревьев документов. Объект инициализирован значением0. SVGSVGElement.createSVGLength()-
Создаёт объект
SVGLengthвне любых деревьев документов. Объект инициализирован значением0пользовательских единиц. SVGSVGElement.createSVGAngle()-
Создаёт объект
SVGAngleвне любых деревьев документов. Объект инициализирован значением0градусов (без единиц). SVGSVGElement.createSVGPoint()-
Создаёт объект
SVGPointвне любых деревьев документов. Объект инициализирован точкой(0,0)в системе координат пользователя. SVGSVGElement.createSVGMatrix()-
Создаёт объект
SVGMatrixвне любых деревьев документов. Объект инициализирован единичной матрицей. SVGSVGElement.createSVGRect()-
Создаёт объект
SVGRectвне любых деревьев документов. Объект инициализирован так, что все значения установлены в0пользовательских единиц. SVGSVGElement.createSVGTransform()-
Создаёт объект
SVGTransformвне любых деревьев документов. Объект инициализирован преобразованием единичной матрицы (SVG_TRANSFORM_MATRIX). SVGSVGElement.createSVGTransformFromMatrix()-
Создаёт объект
SVGTransformвне любых деревьев документов. Объект инициализирован заданной матрицей преобразований (т.е.,SVG_TRANSFORM_MATRIX). Значения из параметра матрицы копируются, параметр матрицы не используется какSVGTransform::matrix. SVGSVGElement.getElementById()-
Ищет в этом фрагменте SVG документа (т.е., поиск ограничен подмножеством дерева документа) элемент, чей
idзадан значениемelementId. Если элемент найден, возвращается этот элемент. Если такого элемента не существует, возвращаетсяnull. Поведение не определено, если более одного элемента имеют этот идентификатор.
Обработчики событий
Следующие Window onXYZ обработчики событий также доступны как псевдонимы, направленные на объект window. Однако рекомендуется подписываться на них на объекте window напрямую, а не на SVGSVGElement.
Примечание: Использование addEventListener() на SVGSVGElement не сработает для обработчиков событий onXYZ перечисленных ниже. Подписывайтесь на события на объекте window вместо этого.
SVGSVGElement.onafterprint-
Вызывается после того, как связанный документ начал печать или предварительный просмотр печати был закрыт.
SVGSVGElement.onbeforeprint-
Вызывается, когда связанный документ должен быть напечатан или просмотрен перед печатью.
SVGSVGElement.onbeforeunload-
Вызывается, когда окно, документ и его ресурсы должны быть загружены.
SVGSVGElement.ongamepadconnected-
Вызывается, когда браузер обнаруживает подключение геймпада или первый раз, когда используется кнопка/ось геймпада.
SVGSVGElement.ongamepaddisconnected-
Вызывается, когда браузер обнаруживает отключение геймпада.
SVGSVGElement.onhashchange-
Вызывается, когда идентификатор фрагмента URL был изменен (часть URL, начинающаяся с и следующая за символом
#). SVGSVGElement.onlanguagechange-
Вызывается, когда меняется предпочтительный язык пользователя.
SVGSVGElement.onmessage-
Вызывается, когда окно получает сообщение, например, из вызова
Window.postMessage()из другого контекста просмотра. SVGSVGElement.onmessageerror-
Вызывается, когда окно получает сообщение, которое нельзя десериализовать.
SVGSVGElement.onoffline-
Вызывается, когда браузер потерял доступ к сети, и значение
Navigator.onLineпереключается наfalse. SVGSVGElement.ononline-
Вызывается, когда браузер получил доступ к сети, и значение
Navigator.onLineпереключается наtrue. SVGSVGElement.onpagehide-
Вызывается, когда браузер скрывает текущую страницу в процессе отображения другой страницы из истории сеанса.
SVGSVGElement.onpageshow-
Вызывается, когда браузер отображает документ окна из-за навигации.
SVGSVGElement.onpopstate-
Вызывается, когда активная запись истории изменяется во время навигации по истории сеанса пользователем.
SVGSVGElement.onrejectionhandled-
Вызывается всякий раз, когда JavaScript
Promiseотклоняется, и отклонение было обработано. SVGSVGElement.onstorage-
Вызывается, когда область хранения (
localStorage) была изменена в контексте другого документа. SVGSVGElement.onunhandledrejection-
Вызывается всякий раз, когда
Promiseотклоняется, но отклонение не было обработано. SVGSVGElement.onunload-
Вызывается, когда документ загружается.
Спецификации
Совместимость с браузерами
| Рабочий стол | Мобильный | ||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|
| Chrome | Edge | Firefox | Opera | Safari | Chrome Android | Firefox for Android | Opera Android | Safari на IOS | Samsung Internet | WebView Android | |
SVGSVGElement |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
|---|---|---|---|---|---|---|---|---|---|---|---|
animationsPaused |
1 | 79 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
checkEnclosure |
1 | 12 | 1.5–21 | ≤12.1 | 3 | 18 | 4–21 | ≤12.1 | 1 | 1.0 | 3 |
checkIntersection |
1 | 12 | 1.5–21 | ≤12.1 | 3 | 18 | 4–21 | ≤12.1 | 1 | 1.0 | 3 |
createSVGAngle |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGLength |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGMatrix |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGNumber |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGPoint |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGRect |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGTransform |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
createSVGTransformFromMatrix |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
currentScale |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
currentTranslate |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
currentView |
21–56 | Нет | 1.5–21 | 15–43 | 7 | 25–56 | 4–21 | 14–43 | 7 | 1.5–6.0 | 4.4–56 |
deselectAll |
1 | 12 | 25 | ≤12.1 | 3 | 18 | 25 | ≤12.1 | 1 | 1.0 | 3 |
forceRedraw |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
getCurrentTime |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
getElementById |
7 | 12 | 1.5 | ≤12.1 | 5.1 | 18 | 4 | ≤12.1 | 5 | 1.0 | 3 |
getEnclosureList |
1 | 12 | Нет | ≤12.1 | 3 | 18 | Нет | ≤12.1 | 1 | 1.0 | 3 |
getIntersectionList |
1 | 12 | Нет | ≤12.1 | 3 | 18 | Нет | ≤12.1 | 1 | 1.0 | 3 |
height |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
pauseAnimations |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
preserveAspectRatio |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
setCurrentTime |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
suspendRedraw |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
unpauseAnimations |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
|---|---|---|---|---|---|---|---|---|---|---|---|
unsuspendRedraw |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
unsuspendRedrawAll |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
useCurrentView |
1–56 | Нет | 15–107 | ≤12.1–43 | 3 | 18–56 | 15–107 | ≤12.1–43 | 1 | 1.0–6.0 | ≤37–56 |
viewBox |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
width |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
x |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
y |
1 | 12 | 1.5 | ≤12.1 | 3 | 18 | 4 | ≤12.1 | 1 | 1.0 | 3 |
См. также
© 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/SVGSVGElement