HTML5 SVG 2D Введение 12 - Введение в операции SVG DOM и DOM

Автор：Eve Cole Время обновления：2025-04-03 16:00:04

Использование сценариев может легко выполнять различные сложные задачи, а также является основным способом завершения анимации и взаимодействия. Поскольку SVG является элементом HTML, он поддерживает обычные операции DOM. Поскольку SVG по сути является документом XML, также существует специальная операция DOM, которая в основном называется SVG DOM. Конечно, поскольку в настоящее время IE не поддерживает SVG, разработка страниц SVG на основе IE требует разных методов. Все на самом деле очень хорошо знакомы с этой частью знаний, поэтому давайте кратко рассмотрим это.

Операции DOM на HTML -страницах

Каждый должен быть знаком с Домом. Вот небольшой пример:

<голова>

<style>

#svgcontainer {

Ширина: 400px;

Высота: 400px;

фоновый цвет: #A0A0A0;

}

</style>

<Скрипт>

функция createSvg () {

var xmlns = "http://www.w3.org/2000/svg";

var boxwidth = 300;

var boxHeight = 300;

var svgelem = document.createElementns (xmlns, "svg");

svgelem.setattributens (null, "viewbox", "0 0" + boxwidth + "" + boxheight);

svgelem.setattributens (null, "ширина", koxwidth);

svgelem.setattributens (null, «высота», BoxHeight);

svgelem.style.display = "block";

var g = document.createElementns (xmlns, "g");

svgelem.appendchild (g);

g.setattributens (null, 'transform', 'матрица (1,0,0, -1,0,300)');

// рисовать линейный градиент

var defs = document.createElementns (xmlns, "defs");

var grad = document.createElementns (xmlns, "lineargradient");

grad.setattributens (null, "id", "gradient");

grad.setattributens (null, "x1", "0%");

grad.setattributens (null, "x2", "0%");

grad.setattributens (null, "y1", "100%");

grad.setattributens (null, "y2", "0%");

var stoptop = document.createElementns (xmlns, "stop");

stoptop.setattributens (null, "offset", "0%");

stoptop.setattributens (null, «стоп-цвета», «#ff0000»);

Grad.AppendChild (Stoptop);

var stopbottom = document.createElementns (xmlns, "stop");

stopbottom.setattributens (null, «смещение», «100%»);

stopbottom.setattributens (null, «стоп-цвета», «#0000ff»);

Grad.AppendChild (Stopbottom);

defs.appendchild (grad);

G.AppendChild (defs);

// нарисовать границы

var координаты = "M 0, 0";

координаты += "l 0, 300";

координаты += "L 300, 0";

координат += "l 0, -300";

Координирует += "L -300, 0";

var path = document.createElementns (xmlns, "path");

path.setattributens (null, «ход», "#000000");

path.setattributens (null, «ширина удара», 10);

path.setattributens (null, «инсульт-линейка», «круглый»);

path.setattributens (null, 'd', координаты);

path.setattributens (null, 'fill', "url (#Gradient)");

path.setattributens (null, «непрозрачность», 1.0);

G.AppendChild (Path);

var svgcontainer = document.getElementbyId ("svgcontainer");

svgcontainer.appendchild (svgelem);

}

</script>

</head>

</body>

Вы это обнаружили? Это точно так же, как операция DOM обычных HTML -элементов:

Выберите элемент: document.getElementById

Создать элемент: document.createElementns

Другой способ создания детских элементов: element.createchildns

Добавить элемент: node.appendchild

Установите атрибут элемента: element.setattributens/element.setattribute

В дополнение к вышеуказанным операциям, следующие операции и свойства также очень распространены:

Получить значение атрибута элемента: element.getattributens/element.getattribute

Проверьте, существует ли атрибут в элементе: element.hasattributens

Удалить атрибут элемента: element.removeattributens

Родительский элемент, дочерний элемент и узел братьев и сестер: element.parentnode/element.firstchild/child.nextibling

Эти методы не будут введены подробно здесь; Кроме того, структура узлов дерева DOM и отношения наследования между объектами похожи, поэтому я не буду подробно объяснять. Студенты, которые это нуждаются, будут ссылаться на документацию для объекта DOM CORE ниже.

Тем не менее, следует отметить, что SVG по сути является документом XML, поэтому метод DOM в основном использует метод с NS -концом для предоставления соответствующих пространств имен; Если пространство имен уже предоставлено при создании элемента, и нет проблем с несколькими пространствами имен, то при настройке связанных атрибутов вы также можете использовать версию без NS, например, использование element.setattribute для непосредственного установить значение атрибута. Тем не менее, в целом, все еще настоятельно рекомендуется использовать версию с окончанием NS, потому что эта версия всегда работает нормально, даже в случае нескольких пространств имен.

SVG Dom

Я не нашел никакой всесторонней информации об этом и стандартном DOM. В настоящее время я только знаю, что методы назначения атрибутов различны. Если у вас есть студенты, которые понимают это, пожалуйста, дайте мне сообщение.

В приведенном выше примере мы используем element.setattributens/element.setattribute для назначения значений атрибутам. В SVG DOM мы можем использовать объектно-ориентированный метод для назначения значений атрибутам объекта через точки доступа. Например, следующее приведено сравнение двух методов:

Обычный метод DOM:

element.setattribute ("x", "10");

element.setattribute ("y", "20");

element.SetAttribute («ширина», «100%»);

element.setattribute («высота», "2em");

И метод SVG DOM:

element.x.baseval.value = 10;

element.y.baseval.value = 20;

element.width.baseval.newvaluespecifiedunits (svglength.svg_lengthtype_percentage, 100);

element.height.baseval.newvaluespecifiedunits (svglength.svg_lengthtype_ems, 10);

Сценарии DOM являются традиционными сценариями, и их характеристики должны устанавливать отдельные элементы путем создания строки стоимости. Преимущество стиля скрипта SVG DOM заключается в том, что вам не нужно создавать строки стоимости, поэтому производительность лучше, чем сценарии DOM.

Сценарии, встроенные в SVG

Если вы хотите добавить сценарии в SVG, вам нужно использовать элементы сценариев. Это было упомянуто ранее. В дополнение к этому, это в основном то же самое, что и сценарии на HTML снаружи. См. Пример:

<! Doctype html public "-// w3c // dtd xhtml 1.0 transitional // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-transitional.dtd">

<голова>

</head>

<тело>

<! [Cdata [

функция showRectcolor () {

Alert (document.getElementById ("myBluerct"). getAttributens (null, "fill"));

}

функция ShowRectarea (evt) {

var width = parsefloat (evt.target.getattributens (null, "width"));

var height = parsefloat (evt.target.getattributens (null, «высота»));

оповещение («Прямоугольная область:» + (ширина * высота));

}

Функция ShowRoOckildRennr () {

Alert ("nr of Children:"+document.documentelement.childnodes.length);

}

]]>

</script>

<Text x = "40" y = "100" Onclick = "showRectColor ()"> Нажмите на этот текст, чтобы показать прямоугольник. </text>

<Текст x = "40" y = "130"> Нажмите на прямоугольник, чтобы показать прямоугольную область. </text>

<text x = "40" y = "160" onclick = "showrootchildrennr ()"> Нажмите на этот текст, чтобы показать количество ребенка

<tspan x = "40" dy = "20"> элементы корневого элемента. </tspan> </text>

</g>

</svg>

</body>

</html>

В этом примере перечислен общий способ получить объекты DOM :

1. Получить объект с помощью таких методов, как Document.getElementByID или Document.GetElementByClassName;

2. Получить объект документа через document.documentelement или document.rootelement;

3. Получите объект, который генерирует событие через параметр события evt.target. Преимущество этого метода заключается в том, что вы можете получить объект, который генерирует событие без использования ID.

Остальные сценарии в основном такие же, как обычный DOM.

Практическая ссылка:

Индекс скрипта: http://msdn.microsoft.com/zh-cn/library/ff971910(v=vs.85).aspx

Центр разработки: https://developer.mozilla.org/en/svg

Популярная ссылка: http://www.chinasvg.com/

Официальный документ: http://www.w3.org/tr/svg11/

API API объекта DOM CORE: http://reference.sitepoint.com/javascript/document

Общие свойства и методы SVG DOM: http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459