HTML5 SVG 2D 소개 8- 문서 구조 및 관련 요소 요약

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

구조 관련 조합 및 재사용 요소를 포함하여 많은 기본 요소를 도입했습니다. 여기서는 SVG 문서 구조의 나머지 관련 요소를 간단히 요약 한 다음 SVG의 다른 기능을 계속 이해할 것입니다.

SVG 문서의 요소는 기본적으로 다음 범주로 나눌 수 있습니다.

• 애니메이션 요소 : 애니메이션, animatecolor, animatemotion, animatetransform, set;

• 설명 요소 : DESC, 메타 데이터, 제목;

• 그래픽 요소 : 원, 타원, 선, 경로, 다각형, 폴리 라인, rect;

• 구조적 요소 : DEFS, G, SVG, Symbol, 사용;

• 그라디언트 요소 : 선형 그라데이션, 방사형 그레이드;

• 기타 요소 : A, Altglyphdef, Clippath, Color-Profile, 커서, 필터, 글꼴, 글꼴, ForeverObject, 이미지, 마커, 마스크, 패턴, 스크립트, 스타일, 스위치, 텍스트,보기 등.

그중에는 그래픽 요소, 그라디언트 요소, 텍스트, 이미지 요소 및 조합이 소개되었습니다. 다음은 구조와 관련된 몇 가지 다른 요소입니다.

Window-SVG 요소

중첩 된 SVG 요소를 포함하여 SVG 요소에서 다른 요소를 순서로 배치 할 수 있습니다.

SVG 요소에 의해 지원되는 특성은 일반적으로 ID, 클래스, x, y, 너비, 높이, 뷰 박스, 보존 전자 및 관련 속성을 채우기 및 뇌졸중으로 사용합니다.

SVG 요소가 지원하는 이벤트는 일반적으로 Onload, OnMouseOver, OnMouseMove, OnMousedown, OnMouseUp, OnClick, OnFocusin, Onfocusout, OnResize, OnScroll, OnOnload 등에 사용됩니다. 전체 속성 및 이벤트 목록은 아래 공식 문서를 참조하십시오.

설명 요소 - DESC 요소 및 제목 요소

각 컨테이너 요소 (A, DEFS, GLYPH, G, Marker, Mask, Missing-Glyph, Pattern, SVG, Switch 및 Symbol)와 같은 그래픽 요소의 다른 컨테이너 요소 또는 요소를 포함 할 수 있으며 그래픽 요소에는 DESC 및 제목 요소가 포함될 수 있습니다. 이 두 요소는 보조 요소이며 관련 상황을 설명하는 데 사용됩니다. 그들의 내용은 텍스트입니다. SVG 문서가 렌더링되면이 두 요소는 그래픽으로 렌더링되지 않습니다. 두 요소의 차이는 그리 크지 않습니다. 제목은 일부 구현에서 프롬프트 메시지로 표시되므로 제목은 일반적으로 상위 요소의 첫 번째 위치에 배치됩니다.

일반적인 사용법은 다음과 같습니다.

<g>

<title> compolysalesbyregion </title>

<sc>

이 thisabarchart가 보여줍니다

CompolySalesbyRegion.

</desc>

<!-BarchartDefinedAsvectorData->

</g>

</svg>

일반적으로 가장 바깥 쪽 SVG 요소에는 제목 설명이 동반되어 프로그램을 더 잘 읽을 수 있습니다.

마커 요소

태그는 하나 이상의 정점 (경로, 선, 폴리 라인 또는 다각형의 verticles)에 부착 된 그래픽 요소 (화살표 및 다중 점 마커)을 정의합니다. 화살표는 경로, 선 또는 폴리 라인의 시작점 또는 종료점에 부착 될 수 있습니다. 멀티 포인트 태그는 경로, 선, 폴리 라인 또는 다각형의 모든 정점에 태그를 추가 할 수 있습니다.

마커는 마커 요소에 의해 정의 된 다음 경로, 선, 폴리 라인 또는 다각형에서 관련 속성 (마커, 마커 스타트, 마커 -mid 및 마커 엔드)을 설정합니다. 예를 참조하십시오 :

<svgwidth = "4in"height = "2in"

ViewBox = "0040002000"버전 = "1.1"

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

<defs>

<Markerid = "삼각형"

viewbox = "001010"refx = "0"refy = "5"

MarkerUnits = "strokewidth"

MarkerWidth = "4"MarkerHeight = "3"

Orient = "Auto">

</마커>

</defs>

<sc> theendofapath를 placinganarrowheadat.

</desc>

<pathd = "M1000750L2000750L25001250"

fill = "none"stroke = "black"stroke-width = "100"

Marker-End = "url (#triangle)"/>

</svg>

마커에 대한 관련 지식을 자세히 살펴 보겠습니다 .

1. 마커는 그래픽 요소, 컨테이너 요소, 애니메이션, 그라디언트 요소 등을 순서대로 저장할 수있는 컨테이너 요소입니다.

2. 마커 요소는 새 창을 만들 수 있습니다. 뷰 박스의 값을 설정하십시오.

3. 마커의 더 중요한 속성 :

MarkerUnits = strokewidth | userspaceonuse

이 속성은 속성 MarkerWidth, MarkerHeight 및 마커의 내용에 의해 사용되는 좌표계를 정의합니다. 이 속성에는 선택할 두 가지 값이 있습니다. 첫 번째 값 strokewidth는 기본값입니다. 속성 MarkerWidth, MarkerHeight 및 마커의 내용에 의해 사용되는 좌표계는 마커의 그래픽 요소의 뇌졸중 범위에 의해 설정된 값과 같습니다.

예를 들어, 위의 예에서 마커 요소의 너비는 400이고 높이는 300입니다. 그러나 혼동하지 마십시오. 마크 요소의 경로에서 사용되는 좌표는 ViewBox에서 설정 한 새로운 사용자 좌표 시스템입니다.

이 속성의 또 다른 값은 마커의 그래픽 요소를 나타내는 좌표계를 사용하여 MarkerWidth, MarkerHeight 및 마커의 내용을 나타내는 UsersPaceOnuse입니다.

refx, refy : 마커와 정렬 된 참조 된 지점의 위치 좌표를 정의합니다. 예를 들어, 위의 예에서, 참조 점은 종점이며, 마커의 (0,5) 위치에 정렬되어야합니다. refx와 refy는 viewbox로 변환 된 최종 사용자 좌표 시스템을 사용합니다.

MarkerWidth, MarkerHeight : 마커 창의 너비와 높이, 이것은 이해하기 쉽습니다.

방향 : 마커 회전의 각도를 정의합니다. 각도를 지정하거나 자동 할당 할 수 있습니다.

자동은 x 축의 양수 방향을 나타내며 다음 규칙에 따라 회전합니다 .

에이. 마커가 위치한 지점이 하나의 경로에 속하는 경우 마커의 x 축의 전진 방향은 경로와 동일합니다. 위의 예를 참조하십시오.

비. 마커가 위치한 지점이 두 개의 다른 경로에 속하는 경우, 마커의 x 축의 전방 방향은 두 경로 사이의 각도의 각도 등화 라인과 일치합니다.

4. 그래픽 요소의 마커 속성

마커를 참조하기 위해, 관련 속성을 사용해야합니다. 주로이 세 가지 : 마커-시작 (참조 마커를 시작점에 넣음), 마커 -MID (참조 마커를 시작점과 종말점을 제외한 모든 지점에 넣음), 마커 엔드 (참조 마커를 엔드 포인트에 넣음). 이 세 가지 속성의 값은 없을 수 있습니다 (마커가 인용되지 않음), 마커 참조 (특정 마커를 참조), 상속 (말할 필요가 없음).

위의 예에서 마커 사용을 볼 수도 있습니다.

스크립트와 스타일 - 스크립트 요소 및 스타일 요소

실제로 기본적으로 모든 속성 (텍스트뿐만 아니라 모든 요소의 경우)은 CSS와의 요소와 관련 될 수 있으며 모든 CSS 속성은 SVG 이미지에서 사용할 수 있습니다. 스타일 속성을 직접 사용하여 요소 스타일을 디자인하거나 스타일 시트 디자인 요소의 스타일을 참조 할 수 있습니다. 스타일 시트는 XML 파일에 대해 구문 분석해서는 안됩니다 (때때로 문제를 일으키는 문자가 포함되어 있기 때문에) XMLCDATA 섹션에 배치해야합니다. 스크립트에 대해서도 마찬가지이며 XMLCDATA 섹션에 배치해야합니다. 다음 CSS 예를 참조하십시오.

<! [cdata [

.Abbreviation {텍스트 설명 : 밑줄;}

]]>

</스타일>

</defs>

<g>

<textx = "20"y = "50"font-size = "30"> ColorsCanBespecified </text>

<textx = "20"y = "100"font-size = "30"> bytheir

<textx = "20"y = "150"font-size = "30"> orbykeywordssuchas </text>

<tspanstyle = "Fill : LightSteelBlue; font-size : 30"> lightsteelblue </tspan>,

</text>

</g>

</svg>

스크립트 예를 살펴 보겠습니다.

<sc> 스크립팅 theonclickeven </desc>

<defs>

<! [cdata [

FunctionHidereVeal (EVT) {

variabletarget = evt.target;

varthefill = imageTarget.getAttribute ( "fill");

if (thefill == 'white')

imageTarget.setAttribute ( "fill", "url (#notes)");

또 다른

imageTarget.setAttribute ( "fill", "white");

}

]]>

</스크립트>

<patternid = "notes"x = "0"y = "0"너비 = "50"높이 = "75"

PatternTransform = "회전 (15)"

PatternUnits = "UsersPaceOnuse">

<linex1 = "20"y1 = "30"x2 = "20"y2 = "0"

스트로크 width = "3"스트로크 = "검은 색"/>

<linex1 = "20"y1 = "0"x2 = "30"y2 = "5"

스트로크 width = "3"스트로크 = "검은 색"/>

</패턴>

</defs>

<EllipseonClick = "HidereVeal (EVT)"CX = "175"Cy = "100"rx = "125"ry = "60"

fill = "url (#notes)"stroke = "black"stroke-width = "5"/>

</svg>

조건부 처리 - 스위치 요소

조건부 처리 속성은 요소가 렌더링되는지 여부를 제어 할 수있는 속성입니다. 기본적으로 대부분의 요소 (특히 그래픽 요소)는 조건부 처리 속성을 지정할 수 있습니다. 조건부 처리 속성은 3 가지가 있습니다 : 필수 확신, 필수 확장 및 시스템 언어. 이 속성은 값 목록을 지정할 수있는 일련의 테스트입니다 (처음 두 속성은 공간으로 분리되고 언어 속성은 쉼표로 분리됩니다). 기본값은 참입니다.

SVG의 스위치 요소는 지정된 조건에 따라 렌더링 할 수있는 기능을 제공합니다. 스위치 요소는 그래픽 요소, 설명 요소, 애니메이션 요소, a, 외국 노브젝트, G, 이미지, SVG, 스위치, 텍스트, 사용 및 기타 요소를 포함 할 수있는 컨테이너 요소입니다. 스위치 요소는 직접 아동 요소의 조건부 처리 속성을 순서대로 확인한 다음 자체 조건을 충족하는 첫 번째 자식 요소를 렌더링합니다. 다른 아동 요소는 무시됩니다. 디스플레이 속성과 마찬가지로 이러한 특성은 이러한 특성을 직접 사용하는 요소의 렌더링에만 영향을 미치며 참조 된 요소 (예 : 사용에 의해 참조 된 요소)에 영향을 미치지 않습니다. 간단히 말해서,이 세 가지 속성은 A, Altglyph, at allglyph, textpath, tref, tspan, animate, animatecolor, animatemotion, animatetransform, set 등과 같은 요소에 영향을 미치며 defs, 커서, 마스크, clippath, 패턴과 같은 요소에 영향을 미치지 않습니다 (이 요소는 다른 요소를 참조하지 않습니다).

참고 : 하위 요소의 디스플레이 및 가시성 속성 값은 스위치 요소 조건 판단의 결과에 영향을 미치지 않습니다.

조건부 처리 속성에 대한 값 목록은 공식 문서를 참조하십시오. 다음은 작은 예입니다.

<스위치>

<rectrequiredFeatures = "http://www.w3.org/tr/svg11/feature#filter"

x = "10"y = "10"너비 = "322"높이 = "502"불투명도 = "0.6"

fill = "black"stroke = "none"filter = "url (#gblshadow)"/>

<rectx = "10"y = "10"너비 = "322"높이 = "502"불투명도 = "0.6"

fill = "black"stroke = "none"/>

</스위치>

이 예제의 의미는 간단하게 사용됩니다. 사용 된 브라우저는 필터 기능을 지원 한 다음 위의 사각형을 그립니다 (필터 속성 포함). 필터 기능이 지원되지 않으면 아래 사각형을 그립니다.

실제로 가장 일반적으로 사용되는 속성은 텍스트의 다중 언어 처리 능력 인 SystemLanguage입니다. 예를 들어:

<스위치>

</스위치>

</svg>

실제 참조 :

스크립트 인덱스 : 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/