HTML5 8의 SVG 2D 소개 - 문서 구조 및 관련 요소 요약_html5 튜토리얼 기술

구조 관련 조합, 재사용 요소 등 많은 기본 요소가 이전에 소개되었습니다. 여기서는 SVG 문서 구조의 나머지 관련 요소를 간략하게 요약한 다음 SVG의 다른 기능을 살펴보겠습니다.
SVG 문서의 요소는 기본적으로 다음 범주로 나눌 수 있습니다.
•애니메이션 요소: animate, animateColor, animateMotion, animateTransform, set;
•설명 요소: desc, 메타데이터, 제목
• 그래픽 요소: 원, 타원, 선, 경로, 다각형, 폴리라인, 직사각형;
• 구조 요소: defs, g, svg, 기호, 사용
• 그라데이션 요소: 선형 그라데이션, 방사형 그라데이션; 기타 요소: a,altGlyphDef,clipPath,color-profile,cursor,filter,font,font-face,foreignObject,image,marker,mask,pattern,script,style,switch,text,view 등
그 중 그래픽 요소, 그라데이션 요소, 텍스트, 이미지 요소 및 조합이 모두 소개되었으며 구조와 관련된 몇 가지 요소가 있습니다.


View-svg 요소 중첩된 svg 요소를 포함하여 svg 요소 내에서 다른 요소를 순서에 관계없이 배치할 수 있습니다.
svg 요소에서 지원되는 일반적으로 사용되는 속성은 id, class, x, y, width, height, viewBox, PreserveAspectRatio 및 채우기 및 획 관련 속성입니다.
svg 요소에서 지원하는 이벤트는 onload, onmouseover, onmousemove, onmousedown, onmouseup, onclick, onfocusin, onfocusout, onresize, onscroll, onunload 등에서도 일반적으로 사용됩니다. svg 요소에 대해 말할 내용은 많지 않습니다. 속성 및 이벤트의 전체 목록은 나중에 공식 문서를 참조하세요.


설명 요소-desc 요소 및 제목 요소 각 컨테이너 요소(다른 컨테이너 요소나 그래픽 요소를 포함할 수 있는 요소: a, defs, glyph, g, 마커, 마스크, 누락된 문자 모양, 패턴, svg, 스위치 및 기호) 및 그래픽 요소에는 설명 및 제목 요소가 포함될 수 있으며, 둘 다 관련 상황을 설명하는 데 사용되는 보조 요소입니다. SVG 문서가 렌더링될 때 이 두 요소는 그래픽으로 렌더링되지 않습니다. 이 두 요소의 차이는 그리 크지 않습니다. 일부 구현에서는 제목이 프롬프트 정보로 나타나므로 제목은 일반적으로 상위 요소의 첫 번째 위치에 배치됩니다.
일반적인 사용법은 다음과 같습니다.

코드 복사코드는 다음과 같습니다.

< ;svgxmlns="http://www.w3.org/2000/svg" version="1.1"width="4in"height="3in">
;title>지역별 회사 매출


회사 매출을 표시하는



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


마커-마커 요소

마커는 하나 이상의 정점(경로, 선, 폴리라인 또는 다각형 정점)에 연결된 그래픽 요소(화살표 및 다중 지점 마커)를 정의합니다. 화살표는 경로, 선 또는 폴리라인의 시작점이나 끝점에 마커를 부착하여 만들 수 있습니다. 다중점 마커는 경로, 선, 폴리라인 또는 다각형의 모든 정점에 마커를 연결할 수 있습니다.

마크는 마커 요소에 의해 정의되며, 경로, 라인, 폴리라인 또는 폴리곤에 해당 속성(marker, marker-start, marker-mid 및 marker-end)을 설정하면 됩니다. 예를 들어보세요:



코드 복사

코드는 다음과 같습니다. < ;svgwidth=" 4in"height="2in" viewBox="0040002000"version="1.1"

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

viewBox="001010"refX="0"refY="5"
markerUnits="StrokeWidth"
markerWidth="4"markerHeight=" 3"
orient="auto">



endofapath에 화살표 머리를 배치합니다. ;/desc>
fill="none"Stroke="black"Stroke-width="100"
marker-end="url(#Triangle)"/> ;

마커 관련 지식을 자세히 살펴보겠습니다:
1. 마커는 그래픽 요소, 컨테이너 요소, 애니메이션, 그래디언트 요소 등을 순서에 관계없이 저장할 수 있는 컨테이너 요소입니다.
2. marker 요소는 새로운 보기 창을 생성할 수 있습니다: viewBox의 값을 설정합니다.
3. 마커의 더 중요한 속성:
markerUnits="StrokeWidth|userSpaceOnUse"
이 속성은 markerWidth, markerHeight 및 마커 콘텐츠 속성에서 사용되는 좌표계를 정의합니다. 이 속성에는 두 개의 선택적 값이 있으며 첫 번째 값인 스트로크Width는 기본값입니다. 이는 markerWidth, markerHeight 속성 및 마커 내용에 사용되는 좌표계의 단위가 스트로크에 의해 설정된 값과 동일함을 의미합니다. 마커를 참조하는 그래픽 요소의 너비입니다.

예를 들어 위의 예에서 마커 요소의 너비는 400이고 높이는 300입니다. 그러나 마크 요소의 경로에서 사용되는 좌표는 새로운 사용자 좌표입니다. viewBox에 의해 설정된 시스템입니다.
이 속성의 또 다른 값은 userSpaceOnUse입니다. 이는 markerWidth, markerHeight 속성 및 마커 콘텐츠가 마커를 참조하는 그래픽 요소의 좌표계를 사용함을 의미합니다.
refX, refY: 마커와 정렬된 참조점의 위치 좌표를 정의합니다. 예를 들어, 위의 예에서는 참조되는 지점이 끝점이므로 마커의 (0,5) 위치에 맞춰 정렬되어야 합니다. refX 및 refY는 viewBox에 의해 변환된 최종 사용자 좌표계를 사용합니다.
markerWidth, markerHeight: 마커 창의 너비와 높이를 이해하기 쉽습니다.
orient: 마커 회전 각도를 정의합니다. 각도를 지정하거나 자동을 직접 지정할 수 있습니다.
auto는 다음 규칙에 따라 x축의 양의 방향이 회전됨을 의미합니다:
a. 마커가 있는 지점이 하나의 경로에만 속하는 경우 양의 x - 마커의 축 방향은 경로의 방향과 동일합니다. 위의 예를 참조하세요.
b. 마커가 있는 지점이 두 개의 서로 다른 경로에 속하는 경우 마커의 양의 x축 방향은 두 경로 사이 각도의 이등분선과 일치합니다.
4. 그래픽 요소의 마커 속성

그래픽 요소가 마커를 참조하려면 관련 속성을 사용해야 하며 주로 다음 세 가지 속성을 사용해야 합니다. marker-start(참조된 마커를 시작 지점에 배치) , marker-mid(참조 마커를 시작점과 끝점을 제외한 모든 지점에 배치), marker-end(참조 마커를 끝점에 배치). 이 세 가지 속성의 값은 없음(마커를 참조하지 않음을 의미), 마커 참조(특정 마커를 참조), 상속(이에 대해 더 이상 말할 필요가 없음)일 수 있습니다.
위 예시에서도 마커의 사용법을 확인할 수 있습니다.

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

코드 복사

코드는 다음과 같습니다.

텍스트 🎜>
.abbreviation{text-장식:underline;}
]]>
< /defs>

색상 지정 가능 ="20"y ="100"font-size="30">bytheir
R >G
B값
orbykeywordssuchas

lightsteelblue,


< /svg>


스크립트 예제를 다시 살펴보세요.

코드 복사

코드는 다음과 같습니다.

클릭 이벤트 스크립팅


functionhideReveal(evt){
varimageTarget=evt.target;
vartheFill=imageTarget.getAttribute("fill");
if(theFill=='white')
imageTarget.setAttribute("fill","url(#notes)");
else
imageTarget.setAttribute("fill","white");
}
]]>

patternTransform="rotate(15)"
patternUnits="userSpaceOnUse"> ;

스트로크-폭="3"스트로크="블랙"/>
Stroke-width="3"Stroke="black"/>


fill="url(#notes)"Stroke="black" 스트로크 너비="5"/>

条件处리-스위치 元素
条件处理属性是能控控属性。基本上大数的素(特别是图형원素)duc可以指定条件处理属性。条件处理属性有3个：requiredFeatures,requiredExtensions and systemLanguage。两个属性是공공格隔开的,语言这个属性是使用逗号隔开的), 默认值city는 true입니다.

SVG형 스위치는 모토로라형 스위치를 사용합니다.素，解释性원素，动画원素，a, foreignObject,g,image,svg,switch,text,use等元素。switch元素会按顺序检查直接子 元素的条件处理属性，然后渲染满足自身条件的第一个子 元素，其会被忽略의 집 . 3个属性会影响a,altGlyph,foreignObject, textPath,tref,tspan,animate,animateColor,animateMotion,animateTransform,set等元素,不会影响defs,cursor,mask,clipPath,pattern等元素(这些元素那么不是可渲染的，要么就是引用别的元素)。

注意: 子元素의 디스플레이와 가시성이 중요하지 않습니다.方文档，这里就看一个소 예문:

复代码代码如下:

x="10"y="10"width="322"height="502"불투명도 ="0.6"
fill="black"Stroke="none"filter="url(#gblurshadow)"/>
fill="black"strok="none"/>

사용 가능한 필터 필터 유형(필터 유형), 필터 유형이 다른 필터 특별한 성질, 하부면의 형태.
더 많은 정보를 제공하고 더 많은 시스템 언어를 사용하고 있으며, 더 많은 정보를 제공합니다.

代码如下:

<스위치>
de-HAHA
en-haha

实用参考：脚本索引：
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/