HTML5 SVG 2D 소개 12- SVG DOM 및 DOM 운영 소개

저자：Eve Cole 업데이트 시간：2025-04-03 16:00:04

스크립트를 사용하면 다양한 복잡한 작업을 쉽게 완료 할 수 있으며 애니메이션과 상호 작용을 완료하는 주류 방법이기도합니다. SVG는 HTML의 요소이므로 일반 DOM 작업을 지원합니다. SVG는 본질적으로 XML 문서이므로 SVG DOM이라고하는 특수 DOM 작업도 있습니다. 물론, IE는 현재 SVG를 지원하지 않기 때문에 IE를 기반으로 SVG 페이지를 개발하려면 다른 방법이 필요합니다. 모두가 실제로 지식 의이 부분에 매우 익숙하므로 아래에서 간단히 살펴 보겠습니다.

HTML 페이지에서 DOM 작업

누구나 Dom에 익숙해야합니다. 다음은 작은 예입니다.

<헤드>

<스타일>

#SVGContainer {

너비 : 400px;

높이 : 400px;

배경색 : #A0A0A0;

}

</스타일>

<cript>

함수 createvg () {

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

var boxwidth = 300;

var boxHeight = 300;

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

svgelem.setAttriptionens (null, "viewbox", "0 0" + boxwidth + "" + boxHeight);

svgelem.setattributens (null, "width", boxwidth);

svgelem.setattributens (null, "높이", BoxHeight);

svgelem.style.display = "block";

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

svgelem.appendchild (g);

g.setattributens (null, 'transform', '매트릭스 (1,0,0, -1,0,300));

// 선형 구배를 그립니다

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

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

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

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

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

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

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

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

STOPTOP.SETATTRIPITENS (NULL, "오프셋", "0%");

STOPTOP.SETATTRIPITENS (NULL, "STOP-COLOR", "#FF0000");

Grad.AppendChild (스톱 탑);

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

STOPBOTTOM.SETATTRIPITENS (NULL, "오프셋", "100%");

STOPBOTTOM.SETATTRIPITENS (NULL, "STOP-COLOR", "#0000FF");

Grad.AppendChild (Stopbottom);

Defs.AppendChild (Grad);

G. AppendChild (defs);

// 경계를 그리십시오

var 좌표 = "m 0, 0";

좌표 += "l 0, 300";

좌표 += "l 300, 0";

coords += "l 0, -300";

coords += "l -300, 0";

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

PATH.SETATTRIPITENS (NULL, '스트로크', "#000000");

PATH.SETATTRIPITENS (NULL, 'Stroke-Width', 10);

Path.setAttriptionens (null, 'stroke-linejoin', "round");

PATH.SETATTRIPITENS (NULL, 'D', 좌표);

Path.setAttriptionens (null, 'fill', "url (#gradient)");

Path.setAttributens (null, '불투명도', 1.0);

G. AppendChild (경로);

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

svgcontainer.appendchild (svgelem);

}

</스크립트>

</head>

</body>

당신은 그것을 발견 했습니까? 일반 HTML 요소의 DOM 작업과 정확히 동일합니다.

요소를 선택하십시오 : document.getElementById

요소 만들기 : document.creeLementns

자식 요소를 만드는 또 다른 방법 : Element.createChildns

요소를 추가하십시오 : node.appendChild

요소의 속성을 설정하십시오. ement .setAttributens/element.setAttribute

위의 작업 외에도 다음 작업 및 속성도 매우 일반적입니다.

요소의 속성 값을 가져옵니다. ement .getAttributens/element.getAttribute

요소에 속성이 존재하는지 여부를 확인하십시오. 요소. Hasattributens

요소의 속성을 제거하십시오 : emeter.removeattriptions

부모 요소, 자식 요소 및 형제 노드 : emeter.parentNode/element.firstchild/child.nextsibling

이 방법은 여기에 자세히 도입되지 않습니다. 또한 DOM 트리의 노드 구조와 객체 간의 상속 관계는 비슷하므로 자세히 설명하지 않습니다. 이를 필요로하는 학생들은 아래 Dom Core 객체에 대한 문서를 참조합니다.

그러나 SVG는 본질적으로 XML 문서이므로 DOM 메소드는 기본적으로 사용되는 메소드가 관련 네임 스페이스를 제공하기위한 메소드입니다. 요소를 작성할 때 네임 스페이스가 이미 제공되고 여러 네임 스페이스에 문제가없는 경우 관련 속성을 설정할 때 NS가없는 버전을 사용하여 ement. 그러나 일반적 으로이 버전은 여러 네임 스페이스의 경우에도 항상 정상적으로 작동하기 때문에 NS 엔딩이있는 버전을 사용하는 것이 좋습니다.

SVG DOM

나는 이것과 표준 dom에 대한 포괄적 인 정보를 찾지 못했습니다. 현재, 나는 속성의 할당 방법이 다르다는 것을 알고 있습니다. 이것을 이해하는 학생이 있으면 메시지를주세요.

위의 예에서는 element.setattributens/element.setAttribute를 사용하여 속성에 값을 할당합니다. SVG DOM에서는 객체 지향 메소드를 사용하여 액세스 포인트를 통해 객체 속성에 값을 할당 할 수 있습니다. 예를 들어, 다음은 두 가지 방법을 비교하는 것입니다.

일반 DOM 방법 :

요소 .setattribute ( "x", "10");

요소 .setAttribute ( "y", "20");

요소 .setAttribute ( "width", "100%");

요소 .setattribute ( "높이", "2em");

및 SVG DOM 방법 :

요소 .x.baseval.value = 10;

요소 .y.baseval.value = 20;

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

요소.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>

<body>

<! [cdata [

함수 showrectColor () {

alert (document.getElementById ( "myBluerect"). getAttriptibens (null, "fill"));

}

함수 showrectArea (EVT) {

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

var height = parsefloat (evt.target.getAttributens (null, "height"));

경고 ( "직사각형 영역은" + (너비 * 높이));

}

함수 showrootchildrennr () {

ALERT ( "어린이의 NR :"+Document.DocumentELement.childNodes.length);

}

]]>

</스크립트>

<text x = "40"y = "100"onclick = "showRectColor ()"> 사각형 색상을 표시하려면이 텍스트를 클릭하십시오. </text>

<text x = "40"y = "130"> 사각형을 클릭하여 사각형 영역을 표시하십시오. </text>

<text x = "40"y = "160"onclick = "showrootchildrennr ()">이 텍스트를 클릭하여 자녀 수를 표시하십시오.

</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/

Dom Core Object API : http://reference.sitepoint.com/javaScript/document

SVG DOM의 일반적인 특성 및 방법 : http://riso.iteye.com/blog/393454, http://riso.iteye.com/blog/393459