지역 사회 배우다 도구 라이브러리 여가
찾다
한국어
집 > 웹 프론트엔드 > H5 튜토리얼 > SVG基础|SVG DEFS元素、SYMBOL元素和USE元素

SVG基础|SVG DEFS元素、SYMBOL元素和USE元素

WBOY
풀어 주다： 2016-05-17 09:07:37
원래의
2127명이 탐색했습니다.
1.jpg

　　SVG DEFS元素

　　SVG的元素用于预定义一个元素使其能够在SVG图像中重复使用。例如你可以将一些图形制作为一个组，并用元素来定义它，然后你就可以在SVG图像中将它当做简单图形来重复使用。看下面的例子：

  2.   
  3.       
  4.          
  5.          
  6.       
  7.   
  8.    
复制代码

　　在元素中定义的图形不会直接显示在SVG图像上。要显示它们需要使用元素来引入它们。如下面的代码所示：
  1.   
  2.   
  3.    
  4.         
  5.         
  6.    
  7.   

  9.   
  10.   
  11.       
复制代码

　　要引用元素，必须在元素上设置一个ID，通过ID来引用它。元素通过xlink:href属性来引入元素。注意在ID前面要添加一个#。

　　在元素中，通过x和y属性来指定重用图形的显示位置。注意在元素中的图形的定位点都是0,0，在使用元素来引用它的时候，它的定位点被转换为元素x和y属性指定的位置。

　　下面是上面代码的返回结果：
2.jpg
　　上面SVG图像中绿色的圆点并不是示例代码的一部分。它们是用来显示2个元素的x和y坐标的。

　　哪些元素可以被定义为defs中的元素呢?

　　你可以将下面的元素放入到元素中使用：

  • 　　任何图形元素，如：rect，line等
  • 　　g
  • 　　symbol

　　SVG SYMBOL元素

　　SVG 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示的，除非你使用元素来引用它。

　　下面是一个使用元素的简单例子：

  2.    
  3.         
  4.    

  6.    
  7.    
复制代码

　　元素需要一个ID号，以便以被元素引用。
3.jpg
　　一个元素可以有preserveAspectRatio和viewBox属性。而元素不能拥有这些属性。因此相比于在元素中使用的方式来复用图形，使用元素也许是一个更好的选择。


　　SVG USE元素

　　SVG 元素可以在SVG图像中多次重用一个预定义的SVG图形，包括元素和元素。被重用的图形可以在定义的内部(图形将不可见直到使用use来引用它)或外部。

　　下面是一个使用元素的例子：

  2.   
  3.    
  4.         
  5.         
  6.    
  7.   

  9.   
  10.   

  12.         
复制代码
　　上面的例子显示的是在元素中定义的元素。

　　要引用元素，必须给它一个ID号，通过ID号来引用它。

　　下面是上面代码的返回结果：
4.jpg
　　我们也可以引用不在元素中的图形。元素可以引用SCG图像中的任何元素，只要这个元素有一个唯一的ID号，例如：


  3.    
  4.         
  5.    

  7.    

  9.       
复制代码

　　这个例子在元素中定义了一个元素。然后通过元素来引用这个元素。它返回的结果如下面所示：
5.jpg
　　注意这里原始图形和复用的图形都会被显示。因为原始的图形并没有定义在或元素中。所以它是可见的。

　　你可以为引用的图形设置CSS样式。你可以在元素中使用style属性来为复用的图形设置它的样式。例如：


  3.   
  4.       
  5.   

  7.   
  8.   

  10.         
复制代码

　　注意上面的代码中，原始的图形并没有设置样式，它将是默认的样式(黑色)。
6.jpg
　　本文版权属于jQuery之家，转载请注明出处：http://www.htmleaf.com/ziliaoku/ ... g/201506132029.html

관련 라벨：
html
원천：php.cn
이전 기사：HTML5 CANVAS：像素处理 다음 기사：响应式编程（Reactive Programming）介绍
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
최신 이슈
MERN 스택 검색 상자 및 확인란에 대한 정규식 필터 MERN 스택이 학습을 통해 함께 작동하는 방식을 이해하려고 노력하고 있으며 bezcoder의 다음 튜토리얼을 따르고 있습니다. Node.js/Express/Mo...
에서 2024-04-06 14:53:12
0
1
425
PDF 파일에서 HTML5 및 Javascript를 실행할 수 있습니까? PDF에 포함되므로 어떤 컴퓨터에서도 차단되지 않는 프로그램을 만들어 보자는 어리석은 생각이 있습니다(Javascript가 PDF에서 실행될 수 있다고 들었습니다...
에서 2024-04-05 12:57:00
0
1
456
Prestashop 설치 문제: 맞춤 모듈을 설치할 수 없습니다. 저는 Prestashop 모듈 개발이 처음입니다. 저는 Amy의 첫 번째 prestashop 모듈을 구축하려고 합니다. [참조: 제 코드는 다음과 같습니다. 이 ...
에서 2024-04-03 19:24:44
0
1
402
PHP 튜토리얼: PHP를 사용하여 Linkedin에 텍스트와 이미지를 업로드하는 방법은 무엇입니까? LinkedinsRestAPI(https://learn.microsoft.com/en-us/linkedin/consumer/integrations/self-ser...
에서 2024-04-03 18:42:29
0
1
420
똑같은 작업을 수행하는 튜토리얼을 보았음에도 불구하고 mySQL 데이터베이스에서 정보를 받을 수 없습니다. 그래서 저는 MySQL 데이터베이스를 읽고 쓰는 프로그램을 만들려고 노력 중인데, 그 결과 YouTube 튜토리얼을 보게 되었습니다. 내 문제는 튜토리얼에 나온 ...
에서 2024-04-03 14:46:04
0
1
298
관련 주제
더>
인기 추천
인기 튜토리얼
더>
관련 튜토리얼
인기 추천
최신 강좌
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿