HTML5 12의 SVG 2D 소개—SVG DOM 및 DOM 작업 소개_html5 튜토리얼 기술

스크립트를 사용하면 다양하고 복잡한 작업을 쉽게 완료할 수 있으며, 애니메이션과 상호작용을 완성하는 주류 방법이기도 합니다. SVG는 html의 요소이므로 일반적인 DOM 작업을 지원합니다. 그리고 SVG는 본질적으로 xml 문서이므로 주로 SVG DOM이라고 하는 특수한 DOM 작업도 있습니다. 물론 IE는 현재 SVG를 지원하지 않기 때문에 IE를 기반으로 SVG 페이지를 개발하려면 다른 방법이 필요합니다. 사실 이 부분의 지식은 다들 잘 알고 계시므로 간단하게만 살펴보도록 하겠습니다.

HTML 페이지의 DOM 작업
누구나 DOM에 대해 잘 알고 있어야 합니다. 다음은 간단한 예입니다.

코드 복사

코드는 다음과 같습니다.

<script> = "http://www.w3.org/2000/svg"; <br />var boxWidth = 300; <br />var boxHeight = 300; <br />var svgElem = document.createElementNS(xmlns, "svg"); <br />svgElem.setAttributeNS(null, "viewBox", "0 0 " boxWidth " " boxHeight); <br />svgElem.setAttributeNS(null, "width", boxWidth) <br />svgElem.setAttributeNS(null, "height) " , boxHeight); <br />svgElem.style.display = "block"; <br />var g = document.createElementNS(xmlns, "g"); <br />svgElem.appendChild(g); <br />g. setAttributeNS(null, 'transform', 'matrix(1,0,0,-1,0,300)'); <br />// 선형 그래디언트 그리기 <br />var defs = document.createElementNS(xmlns, "defs"); <br />var grad = document.createElementNS(xmlns, "linearGradient"); <br />grad.setAttributeNS(null, "id", "gradient") <br />grad.setAttributeNS(null, "x1", "0 % "); <br />grad.setAttributeNS(null, "x2", "0%"); <br />grad.setAttributeNS(null, "y1", "100%"); <br />grad.setAttributeNS(null) , "y2", "0%"); <br />var stopTop = document.createElementNS(xmlns, "stop") <br />stopTop.setAttributeNS(null, "offset", "0%"); stopTop .setAttributeNS(null, "stop-color", "#ff0000"); <br />grad.appendChild(stopTop) <br />var stopBottom = document.createElementNS(xmlns, "stop"); setAttributeNS(null, "offset", "100%"); <br />stopBottom.setAttributeNS(null, "stop-color", "#0000ff") <br />grad.appendChild(stopBottom); appendChild(grad); <br />g.appendChild(defs); <br />// 테두리 그리기 <br />var coords = "M 0, 0" <br />coords = " l 0, 300"; coords = " l 300, 0"; <br />coords = " l 0, -300"; <br />coords = " l -300, 0" <br />var path = document.createElementNS(xmlns, "경로" ) ; <br />path.setAttributeNS(null, '스트로크', "#000000") <br />path.setAttributeNS(null, '스트로크 폭', 10) <br />path.setAttributeNS(null, '스트로크) - linejoin', "round"); <br />path.setAttributeNS(null, 'd', coords) <br />path.setAttributeNS(null, 'fill', "url(#gradient)"); path .setAttributeNS(null, 'opacity', 1.0); <br />g.appendChild(경로); <br />var svgContainer = document.getElementById("svgContainer") <br />svgElem); > } <br /></script>

;

알고 계셨나요? 일반 HTML 요소의 DOM 작업은 완전히 동일합니다.
요소 선택: document.getElementById
요소 만들기: document.createElementNS
하위 요소를 만드는 또 다른 방법: createChildNS.
요소 추가: node.appendChild
요소의 속성 설정: element.setAttributeNS/element.setAttribute
위 작업 외에도 다음 작업 및 속성도 공통입니다.
요소의 속성 가져오기 속성 속성 값: element.getAttributeNS/element.getAttribute
요소에 속성이 있는지 확인: element.hasAttributeNS
요소의 속성 제거: element.removeAttributeNS
상위 요소, 하위 요소 및 형제 노드 : element.parentNode/element.firstChild/child.nextSibling
이러한 메소드는 여기서 자세히 소개하지 않으며 DOM 트리의 노드 구조와 객체 간의 상속 관계도 유사하므로 동일하지 않습니다. 자세히 설명되어 있습니다. 필요한 학생은 나중에 DOM Core Object 문서를 참조할 수 있습니다.
단, SVG는 기본적으로 XML 문서이므로 요소 생성 시 네임스페이스를 제공하고 네임스페이스가 여러 개가 아닌 경우 사용되는 기본 DOM 메서드는 모두 NS로 끝나 관련 네임스페이스를 제공합니다. 문제가 발생하면 관련 속성을 설정할 때 element.setAttribute를 직접 사용하여 속성 값을 설정하는 등 NS가 없는 버전을 사용하도록 선택할 수도 있지만 일반적으로 여전히 NS로 끝나는 버전을 사용하는 것이 좋습니다. 이 버전은 네임스페이스가 여러 개인 경우에도 항상 잘 작동합니다.
SVG DOM
이게 표준 DOM과 어떻게 다른가요? 현재는 속성을 할당하는 방법이 다르다는 것만 알고 있습니다. 혹시 이 사실을 알고 있는 학생이 있으면 알려주세요.
위 예에서는 element.setAttributeNS/element.setAttribute를 사용하여 속성에 값을 할당합니다. SVG DOM에서는 dot에 액세스하여 객체 지향 방법을 사용하여 객체의 속성에 값을 할당할 수 있습니다. 예를 들어 다음은 두 가지 방법 비교입니다.
일반적인 DOM 방법:

코드 복사

코드는 다음과 같습니다.

element.setAttribute("x", "10")
element.setAttribute("y", "20")
element.setAttribute ("width", "100%");
element.setAttribute("height", "2em")

SVG DOM 방식:

코드 복사

코드는 다음과 같습니다.

element.x.baseVal.value = 10; .y.baseVal.value = 20;
element.width .baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_PERCENTAGE, 100);
element.height.baseVal.newValueSpecifiedUnits(SVGLength.SVG_LENGTHTYPE_EMS, 10); 🎜 >
DOM 스크립트는 개별 항목을 설정하기 위해 Construct "값 문자열"을 전달하는 것이 특징인 전통적인 스크립트입니다. SVG DOM 스크립트 스타일의 장점은 "값 문자열"을 작성할 필요가 없으므로 성능이 DOM 스크립트보다 낫다는 것입니다.

SVG에 내장된 스크립트

SVG 내부에 스크립트를 추가하려면 script 요소를 사용해야 합니다. 이 외에도 기본적으로는 다음과 같습니다. 스크립트를 넣는 것과 동일합니다. 외부 HTML에도 동일합니다. 예를 보세요:

코드 복사

코드는 다음과 같습니다.

직사각형 색상을 표시하려면 이 텍스트를 클릭하세요.
사각형 영역을 표시하려면 직사각형을 클릭하세요.
자녀 수를 보려면 이 텍스트를 클릭하세요.
루트 요소의 요소