HTML5 SVG 2D 소개 7- SVG 요소의 재사용 및 참조

저자：Eve Cole 업데이트 시간：2025-04-12 02:48:01

나는 전에 많은 그래픽 요소를 소개했습니다. 많은 그래픽 요소가 동일하다면 매번 새로운 그래픽 요소를 정의해야합니까? 그래픽을 공유 할 수 있습니까? 이것이 SVG 요소의 재사용 인이 섹션의 초점입니다.

조합 -G 요소

G 요소는 관련 그래픽 요소 그룹을 전체로 결합한 컨테이너입니다. 이런 식으로, 우리는이 전체에서 작동 할 수 있습니다. 이 요소는 일반적으로 DESC 및 제목 요소와 함께 사용하여 문서의 구조 정보를 제공 할 수 있습니다. 잘 구조화 된 문서는 일반적으로 잘 읽을 수 있고 렌더링됩니다. 작은 예를 참조하십시오.

<svgxmlns = "http://www.w3.org/2000/svg"

버전 = "1.1"너비 = "5cm"높이 = "5cm">

<sc> twogroups, earkoftworectangles </desc>

</g>

</g>

<!-Canvasing'Rect'Element의 Showoutline->

<rectx = ". 01cm"y = ". 01cm"너비 = "4.98cm"높이 = "4.98cm"

fill = "none"stroke = "blue"stroke-width = ". 02cm"/>

</svg>

주목할만한 몇 가지 사항 :

1.xmlns = http : //www.w3.org/2000/svg 전체 SVG 요소의 기본 네임 스페이스가 SVG임을 나타냅니다. 모호성이 없을 때 생략 할 수 있습니다. SVG 문서는 XML 문서이므로 XML 네임 스페이스의 관련 규칙은 여기에 적용됩니다. 예를 들어, SVG에 표시된 지정된 네임 스페이스를 제공하고 네임 스페이스에 별명을 제공 할 수 있습니다.

2.G 요소는 중첩 될 수 있습니다.

3. 결합 된 그래픽 요소는 개별 요소와 동일하며 ID 값을 제공 할 수 있습니다. 이런 식으로, 필요할 때 (예를 들어, 요소 그룹의 애니메이션 및 재사용),이 ID 값 만 참조 할 수 있습니다.

4. 그래픽 요소 세트를 결합하면이 요소 세트 (채우기, 스트로크, 변환 등)의 관련 속성을 설정할 수 있으며, 이는 조합이 사용되는 시나리오이기도합니다.

템플릿 - 기호 요소

기호 요소는 그래픽 템플릿 (템플릿이 많은 그래픽을 포함 할 수 있음)을 정의하는 데 사용되며, 사용 요소에 의해 인스턴스화 될 수 있습니다. 템플릿의 기능은 G 요소와 매우 유사하며, 둘 다 그래픽 객체 세트를 제공하지만 몇 가지 차이점이 있습니다. G 요소의 차이점은 다음과 같습니다.

1. 기호 요소 자체가 렌더링되지 않으며 심볼 템플릿의 인스턴스 만 렌더링됩니다.

2. 기호 요소는 기호가 그래픽 요소를 확장 할 수 있도록 속성 Viewbox 및 Preserveaspectratio를 가질 수 있습니다.

렌더링 관점에서, 기호 요소와 유사한 요소는 마커 (화살표 및 마커 정의) 및 패턴 (색상 정의) 요소입니다. 이러한 요소는 직접 렌더링되지 않습니다. 그들의 사용은 기본적으로 사용 요소에 의해 인스턴스화됩니다. 이러한 이유로 '디스플레이'속성은 기호에 의미가 없습니다.

다음 수정 된 코드는 기호 사용 방법을 보여줍니다.

<svgxmlns = "http://www.w3.org/2000/svg"

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

버전 = "1.1"너비 = "5cm"높이 = "5cm">

<sc> twogroups, earkoftworectangles </desc>

</기호>

</g>

<!-Canvasing'Rect'Element의 Showoutline->

<rectx = ". 02cm"y = ". 02cm"너비 = "4.96cm"높이 = "4.96cm"

fill = "none"stroke = "blue"stroke-width = ". 02cm"/>

</svg>

-defs 요소를 정의하십시오

SVG를 사용하면 객체 세트를 정의한 다음 재사용 할 수 있습니다 (그래픽 객체가 아닙니다). 가장 일반적인 예는 그라디언트 색상을 정의한 다음 다른 그래픽 객체에 채우기 속성을 할당하는 것입니다. 그라디언트 컬러 정의는 렌더링되지 않으므로이 유형의 객체를 어디에나 배치 할 수 있습니다. 재사용은 종종 그래픽 객체에서 발견되며 정의 할 때 직접 렌더링하고 싶지 않고 대신 참조로 렌더링하고 싶습니다. DEFS 요소를 사용하여 구현할 수 있습니다.

일반적으로 권장되는 접근법은 참조 된 객체를 가능할 때마다 DEFS 요소에 배치하는 것입니다. 이러한 객체는 일반적으로 Altglyphdef, Clippath, Cursor, 필터, 마커, 마스크, 패턴, 선형 그레이드, 방사형 그레이드, 기호 및 그래픽 객체입니다. DEFS 요소에서 이러한 객체를 정의하는 것은 이해하기 쉽기 때문에 접근성을 향상시킵니다.

실제로, 컨테이너 객체로서 G 요소, 기호 요소 및 DEF 요소는 모두 다양한 각도에 재사용을 제공하지만 각 요소의 특성은 약간 다를 수 있습니다. 예를 들어, G 요소가 직접 렌더링되며, 기호와 DEF는 뷰 박스 속성을 포함하여 새 창을 생성합니다.

일반적으로 DEFS에 정의 된 요소에는 ID 속성이 할당되며 사용되는 곳마다 직접 사용됩니다. 요소에 따라 이러한 정의는 다음과 같은 점진적인 색상과 같은 다른 장소에서 사용될 수 있습니다.

<svgwidth = "8cm"height = "3cm"

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

<sc> localurireferences와 함께 inancestor's'defs '요소. </desc>

<defs>

</lineargradient>

</defs>

<rectx = "1cm"y = "1cm"너비 = "6cm"높이 = "1cm"

fill = "url (#gradient01)"/>

</svg>

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

<svgwidth = "10cm"height = "3cm"viewbox = "0010030"버전 = "1.1"

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

<sc> exampleAse01-simplecaseof'use'ona'rect '</desc>

<defs>

</defs>

<rectx = ". 1"y = ". 1"width = "99.8"height = "29.8"

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

</svg>

여기에서 xlink 네임 스페이스 사용에 유의하십시오. 대부분의 시청자는이 항목 없이이 항목을 올바르게 표시하지만 일관성을 위해 Xlink 네임 스페이스는 <svg> </svg> 요소에 정의되어야합니다.

견적 사용 요소

모든 SVG, Symbol, G, 단일 그래픽 요소 및 사용 요소는 사용 요소에 의해 템플릿 객체로 본질적으로 참조 될 수 있습니다 (예 : 초기화). 사용에 의해 참조 된 그래픽 내용은 지정된 위치에서 렌더링됩니다. 이미지 요소와 달리 사용 요소는 전체 문서를 참조 할 수 없습니다.

사용 요소에는 x, y, 너비 및 높이 속성도 있습니다. 이러한 속성을 생략 할 수 있습니다. 생략되지 않으면 참조 된 그래픽 컨텐츠 좌표 또는 길이가 현재 사용자 좌표 공간에 매핑됩니다.

사용 요소의 동작 프로세스는 참조 된 객체를 독립적 인 비공개 DOM 트리에 깊이 복사하는 것과 같습니다. 이 트리의 부모 노드는 사용 요소입니다. 비공개 DOM 노드이지만 본질적으로 DOM 노드입니다. 따라서 참조 된 객체의 모든 속성 값, 애니메이션, 이벤트 및 CSS 관련 설정이 복사되며 여전히 작동합니다. 또한, 이러한 노드는 또한 사용 요소와 사용 조상의 관련 속성을 상속 할 것입니다 (참조 된 요소는 깊은 사본이며, 복사 된 요소는 원래 요소와 관련이 없으므로 참조 된 요소 조상 노드의 속성은 여기에서 상속되지 않습니다). 이러한 노드 자체에 관련 (CSS) 속성이있는 경우 일반 DOM 노드와 일치하는 상속 된 속성을 덮어 씁니다. 가시성을 사용할 때주의해야합니다. 사용 요소의 경우 숨겨져 있으면 반드시 작동하지 않습니다. 그러나 이러한 노드는 비공개이므로 DOM 작업에서 사용 요소 만 볼 수 있으므로 사용 요소 만 작동 할 수 있습니다.

시각 효과의 관점에서 사용 요소는 자리 표시 자와 비슷하며 렌더링 후 시각적 효과는 참조 된 객체와 직접 렌더링하는 것과 동일합니다.

1. 사용 요소는 기호 요소를 나타냅니다

이 경우 시각적 효과는 다음과 같습니다.

(1) 사용 요소를 G 요소로 변경합니다.

(2) x, y, 너비, 높이, xlink를 제외한 사용의 모든 특성을 g 요소로 이동;

(3) 사용 속성을 번역 (x, y)으로 돌리고 G 요소의 마지막 변환 속성에 추가하십시오.

(4) 참조 된 기호 요소를 SVG 요소로 바꾸십시오. 이 SVG 요소는 사용 요소의 너비 및 높이 속성을 명시 적으로 사용합니다 (사용 요소에는 이러한 속성이 없으며 100%).

(5) 참조 된 기호 요소의 그래픽 내용을 대체 된 SVG에 깊이 복사하십시오.

2. 사용 요소는 SVG 요소를 나타냅니다

이 경우 시각적 효과는 다음과 같습니다.

(1) 사용 요소를 G 요소로 변경합니다.

(2) x, y, 너비, 높이, xlink를 제외한 사용의 모든 특성을 g 요소로 이동;

(3) 사용 속성을 번역 (x, y)으로 돌리고 G 요소의 마지막 변환 속성에 추가하십시오.

(4) 내용을 포함한 참조 된 SVG 요소를 복사하십시오. 이 SVG 요소는 사용 요소의 너비 및 높이 속성을 명시 적으로 사용합니다 (사용 요소에는 이러한 속성이 없으며 원래 값을 사용합니다).

3. 다른 상황

이 경우 시각적 효과는 다음과 같습니다.

(1) 사용 요소를 G 요소로 변경합니다.

(2) x, y, 너비, 높이, xlink를 제외한 사용의 모든 특성을 g 요소로 이동;

(3) 사용 속성을 번역 (x, y)으로 돌리고 G 요소의 마지막 변환 속성에 추가하십시오.

(4) 참조 된 요소를 복사하십시오.

다음 예제의 시각적 효과를 참조하십시오 .

<svgwidth = "10cm"height = "3cm"viewbox = "0010030"버전 = "1.1"

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

<sc> exampleAse03-'use'witha'Transform'Attribute </desc>

<defs>

</defs>

<rectx = ". 1"y = ". 1"width = "99.8"height = "29.8"

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

<usexlink : href = "#myrect"

transform = "번역 (20,2.5) 회전 (10)/>

</svg>

다음 그림은 위 그림과 동일하게 보입니다 .

<svgwidth = "10cm"height = "3cm"viewbox = "0010030"

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

<sc> exampleAse03-'use'witha'Transform'Attribute </desc>

<rectx = ". 1"y = ". 1"width = "99.8"height = "29.8"

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

</g>

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