HTML5 SVG 2D 소개 7 - SVG Elements_html5 튜토리얼 기술의 재사용 및 참조

앞서 많은 그래픽 요소를 소개했는데, 많은 그래픽 자체가 동일하다면 매번 새로운 그래픽 요소를 정의해야 합니까? 그래픽을 좀 공유해볼까요? 이 섹션의 초점은 SVG 요소의 재사용입니다.

결합된-g 요소
g 요소는 이와 같은 방식으로 관련 그래픽 요소 그룹을 전체로 결합하는 컨테이너입니다. 이 요소는 일반적으로 문서에 대한 구조적 정보를 제공하기 위해 desc 및 title 요소와 함께 사용할 수 있습니다. 잘 구조화된 문서는 일반적으로 읽기 쉽고 효율적으로 렌더링됩니다. 간단한 예를 살펴보세요.

코드 복사

코드는 다음과 같습니다.

version="1.1"width="5cm"height="5cm">
두 그룹, 두 직사각형 각각

🎜>


height="1cm" />

width="4.98cm "height="4.98cm"
fill="none"Stroke="blue" 스트로크-너비=".02cm"/>


몇 가지 사항에 유의하세요
:
1.xmlns="http://www.w3.org/2000/svg"는 전체 svg 요소의 기본 네임스페이스가 svg임을 나타냅니다. 이는 모호성이 없으면 생략할 수 있습니다. svg 문서는 XML 문서이므로 XML 네임스페이스의 관련 규칙이 여기에 적용됩니다. 예를 들어 svg 표시에 대한 네임스페이스를 지정하고 네임스페이스에 대한 별칭을 제공하는 등의 작업을 수행할 수 있습니다.

2.g 요소는 중첩될 수 있습니다.
3. 결합된 그래픽 요소에는 단일 요소처럼 ID 값이 부여될 수 있습니다. 이러한 방식으로 필요한 경우(예: 애니메이션 및 요소 그룹 재사용) 이 ID 값만 참조하면 됩니다. 4. 그래픽 요소 그룹을 결합하면 해당 요소 그룹의 관련 속성(채우기, 획, 변형 등)을 균일하게 설정할 수 있습니다. 이는 조합이 사용되는 시나리오이기도 합니다.

Template-symbol 요소

symbol 요소는 그래픽 템플릿을 정의하는 데 사용됩니다(템플릿에는 많은 그래픽이 포함될 수 있음). 템플릿의 기능은 g 요소의 기능과 매우 유사하지만 둘 다 그래픽 개체 세트를 제공하지만 몇 가지 차이점이 있습니다. g 요소와의 차이점은 다음과 같습니다.
1. 기호 요소 자체는 렌더링되지 않으며 기호 템플릿의 인스턴스만 렌더링됩니다.
2. 기호 요소에는 기호가 그래픽 요소의 크기를 조정할 수 있도록 하는 viewBox 및 PreserveAspectRatio 속성이 있을 수 있습니다. 렌더링 관점에서 볼 때 기호 요소와 유사한 요소는 마커(화살표 및 레이블 정의) 및 패턴(색상 정의) 요소입니다. 이러한 요소는 기본적으로 요소를 사용하여 인스턴스화합니다. 이러한 이유로 'display' 속성은 기호에 대해 의미가 없습니다.
다음 수정 코드는 기호 사용 방법을 보여줍니다.





코드 복사

코드는 다음과 같습니다. xmlns:xlink="http://www.w3.org/1999/xlink"

version="1.1"width="5cm"height="5cm">

두 그룹, 각 직사각형

" height="1cm"/>



" .02cm"width="4.96cm"height="4.96cm"
fill="none"Stroke="blue"Stroke-width=".02cm"/>
>

define-defs 요소
SVG를 사용하면 개체 집합을 정의한 다음 이 개체 집합을 재사용할 수 있습니다(참고: 그래픽 개체뿐만 아니라). 가장 일반적인 예는 그라데이션 색상을 정의한 다음 이를 다른 그래픽 객체의 채우기 속성에 할당하는 것입니다. 그라데이션 색상은 정의 시 렌더링되지 않으므로 이 유형의 개체는 어디에나 배치할 수 있습니다. 재사용은 종종 그래픽 개체에 존재하며 정의할 때 직접 렌더링하기를 원하지 않고 참조된 위치에서 렌더링하기를 원합니다. 이는 defs 요소를 사용하여 달성할 수 있습니다.

일반적으로 권장되는 접근 방식은 가능할 때마다 참조 객체를 defs 요소에 넣는 것입니다. 이러한 개체는 일반적으로 altGlyphDef, ClipPath, 커서, 필터, 마커, 마스크, 패턴, 선형Gradient, RadialGradient, 기호 및 그래픽 개체 등입니다. defs 요소에 이러한 객체를 정의하면 이해하기 쉬워지고 접근성이 향상됩니다.

사실 컨테이너 객체인 g 요소, 기호 요소, defs 요소는 모두 다양한 수준에서 재사용 기능을 제공하지만 각 요소의 특성은 조금씩 다를 수 있습니다. 예를 들어 g 요소는 직접 렌더링됩니다. , 기호 및 defs는 직접 렌더링되지 않습니다. 기호에는 viewBox 속성이 포함되어 있으며 새 보기 창이 생성됩니다.

일반적으로 id 속성은 defs에 정의된 요소에 할당되며 사용되는 곳에 직접 사용됩니다. 요소에 따라 이러한 정의는 다른 위치에서 사용될 수 있습니다. 예를 들어 다음과 같은 점진적 색상이 속성으로 사용됩니다.

코드 복사

코드는 다음과 같습니다.

xmlns="http://www.w3.org/2000 /svg"version=" 1.1">
LocalURIreferenceswithinancestor's'defs'element.




🎜>> ;
fill="url(#Gradient01)"/>


use 요소를 사용하여 그래픽 관련 요소의 정의를 문서에 연결할 수 있습니다. 예:

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

xmlns="http://www.w3.org/2000/svg"xmlns:xlink="http://www. w3.org/ 1999/xlink">
ExampleUse01-Simplecaseof'use'ona'ret'



fill="none "Stroke="blue"Stroke-width=".2"/>



여기서 xlink 네임스페이스 사용에 유의하세요. 대부분의 뷰어에서는 이 항목이 없어도 이를 올바르게 표시하지만 일관성을 위해 xlink 네임스페이스는 요소에 정의되어야 합니다.

참조 사용 요소
모든 svg, 기호, g, 단일 그래픽 요소 및 사용 요소는 본질적으로 사용 요소에 의해 템플릿 개체(예: 초기화)로 참조될 수 있습니다. 사용 시 참조되는 그래픽 콘텐츠는 지정된 위치에서 렌더링됩니다. image 요소와 달리 use 요소는 전체 문서를 참조할 수 없습니다.
use 요소에는 x, y, width 및 height 속성도 있습니다. 이러한 속성을 생략하지 않으면 참조된 그래픽 콘텐츠의 좌표 또는 길이가 현재 사용자 좌표 공간에 매핑됩니다.

use 요소의 기능은 참조된 객체를 독립적인 비공개 DOM 트리에 심층 복사하는 것과 같습니다. 이 트리의 상위 노드는 use 요소입니다. 비공개 DOM 노드이기는 하지만 본질적으로 여전히 DOM 노드이기 때문에 참조된 개체의 모든 속성값, 애니메이션, 이벤트, CSS 관련 설정 등이 복사되어 계속 작동하며 이러한 노드는 또한 요소의 관련 속성을 상속하고 조상을 사용합니다(참조된 요소는 전체 복사본입니다. 복사된 요소는 원본 요소와 아무 관련이 없으므로 참조된 요소의 조상 노드 속성은 여기에서 상속되지 않습니다). 이러한 노드 자체가 관련(CSS) 속성이고 상속된 속성도 재정의하는 경우 이는 일반 DOM 노드와 일치하므로 사용 요소에 "visibility:hidden"을 사용할 때 반드시 작동하지 않을 수 있으므로 주의하세요. 하지만 노드 중 이 부분은 공개되지 않기 때문에 DOM 연산 시에는 use 요소만 볼 수 있기 때문에 use 요소만 조작할 수 있습니다.

시각적 효과의 관점에서 use 요소는 자리 표시자에 가깝습니다. 렌더링 후의 시각적 효과는 참조된 개체를 사용하여 직접 렌더링하는 것과 같습니다.
1.use 요소 참조 기호 요소
이 경우 시각적 효과는 다음과 같습니다.
(1) use 요소를 g 요소로 교체합니다.
(2) use를 x, y, 너비로 나눕니다. height, ) 참조된 기호 요소를 svg 요소로 대체합니다. 이 svg 요소는 use 요소의 너비 및 높이 속성을 명시적으로 사용합니다(이러한 속성이 없는 use 요소는 100%가 됩니다).
(5) 그래픽을 변경합니다. 참조된 기호 요소의 내용은 대체된 svg에 깊게 복사됩니다.

2. use 요소는 svg 요소를 참조합니다.
이 경우 시각적 효과는 다음과 같습니다. (1) use 요소를 g 요소로 바꿉니다. >(2) x, y, width, height, xlink:href를 제외한 모든 사용 속성을 g 요소로 이동합니다.
(3) 사용의 x, y 속성을 변환(x, y) 및 추가로 변경합니다. g 요소의 변환 속성이 ​​마지막입니다.
(4) 콘텐츠를 포함하여 참조된 svg 요소를 복사합니다. 이 svg 요소는 use 요소의 너비 및 높이 속성을 명시적으로 사용합니다(use 요소는 원래 값을 사용합니다). ​​이러한 속성이 없는 경우);

3. 기타 상황

이 경우 시각적 효과는 다음과 같습니다. (1) use 요소를 g로 바꿉니다. element; (2) use를 x, y, width, height, xlink로 나눕니다. href를 제외한 모든 속성은 g 요소로 이동합니다.
(3) use의 x, y 속성을 변경합니다( x, y)를 g 요소의 변환 속성 끝에 추가합니다.
(4) 참조 요소를 복사합니다.

아래 예시의 시각적 효과를 살펴보세요
.

코드 복사

코드는 다음과 같습니다.

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

ExampleUse03-'use'witha'transform'속성


> ;
fill="none"Stroke="blue"Stroke-width=".2"/ >
transform="translate(20, 2.5)rotate(10)"/>




아래 사진의 모습은 위 사진과 같습니다

:

코드 복사

코드는 다음과 같습니다.

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

ExampleUse03-'use'witha'transform'attribute< ;/desc>
fill="none"Stroke="blue"Stroke-width=". 2"/>






실용 참조:
스크립트 색인: 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/