찾다
웹 프론트엔드H5 튜토리얼SVG基础|SVG DEFS元素、SYMBOL元素和USE元素

1.jpg

  SVG DEFS元素

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

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

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

  8.   
  9.   
  10.       
复制代码

  要引用元素,必须在元素上设置一个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 元素用于定义可重复使用的符号。嵌入在元素中的图形是不会被直接显示的,除非你使用元素来引用它。

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

  1.    
  2.         
  3.    

  4.    
  5.    
复制代码

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


  SVG USE元素

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

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

  1.   
  2.    
  3.         
  4.         
  5.    
  6.   

  7.   
  8.   

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

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

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


  1.    
  2.         
  3.    

  4.    

  5.       
复制代码

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

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


  1.   
  2.       
  3.   

  4.   
  5.   

  6.         
复制代码

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

성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
HTML超文本标记语言--超在那里?(文档分析)HTML超文本标记语言--超在那里?(文档分析)Aug 02, 2022 pm 06:04 PM

本篇文章带大家了解一下HTML(超文本标记语言),介绍一下HTML的本质,HTML文档的结构、HTML文档的基本标签和图像标签、列表、表格标签、媒体元素、表单,希望对大家有所帮助!

html和css算编程语言吗html和css算编程语言吗Sep 21, 2022 pm 04:09 PM

不算。html是一种用来告知浏览器如何组织页面的标记语言,而CSS是一种用来表现HTML或XML等文件样式的样式设计语言;html和css不具备很强的逻辑性和流程控制功能,缺乏灵活性,且html和css不能按照人类的设计对一件工作进行重复的循环,直至得到让人类满意的答案。

web前端笔试题库之HTML篇web前端笔试题库之HTML篇Apr 21, 2022 am 11:56 AM

总结了一些web前端面试(笔试)题分享给大家,本篇文章就先给大家分享HTML部分的笔试题(附答案),大家可以自己做做,看看能答对几个!

HTML5中画布标签是什么HTML5中画布标签是什么May 18, 2022 pm 04:55 PM

HTML5中画布标签是“<canvas>”。canvas标签用于图形的绘制,它只是一个矩形的图形容器,绘制图形必须通过脚本(通常是JavaScript)来完成;开发者可利用多种js方法来在canvas中绘制路径、盒、圆、字符以及添加图像等。

总结HTML中a标签的使用方法及跳转方式总结HTML中a标签的使用方法及跳转方式Aug 05, 2022 am 09:18 AM

本文给大家总结介绍a标签使用方法和跳转方式,希望对大家有所帮助!

html5废弃了哪个列表标签html5废弃了哪个列表标签Jun 01, 2022 pm 06:32 PM

html5废弃了dir列表标签。dir标签被用来定义目录列表,一般和li标签配合使用,在dir标签对中通过li标签来设置列表项,语法“<dir><li>列表项值</li>...</dir>”。HTML5已经不支持dir,可使用ul标签取代。

html中document是什么html中document是什么Jun 17, 2022 pm 04:18 PM

在html中,document是文档对象的意思,代表浏览器窗口的文档;document对象是window对象的子对象,所以可通过“window.document”属性对其进行访问,每个载入浏览器的HTML文档都会成为Document对象。

html5支持boolean值属性吗html5支持boolean值属性吗Apr 22, 2022 pm 04:56 PM

html5支持boolean值属性;boolean值属性指是属性值为true或者false的属性,如input元素中的disabled属性,不使用该属性表示值为flase,不禁用元素,使用该属性可以不设置属性值表示值为true,禁用元素。

See all articles

핫 AI 도구

Undresser.AI Undress

Undresser.AI Undress

사실적인 누드 사진을 만들기 위한 AI 기반 앱

AI Clothes Remover

AI Clothes Remover

사진에서 옷을 제거하는 온라인 AI 도구입니다.

Undress AI Tool

Undress AI Tool

무료로 이미지를 벗다

Clothoff.io

Clothoff.io

AI 옷 제거제

AI Hentai Generator

AI Hentai Generator

AI Hentai를 무료로 생성하십시오.

뜨거운 도구

WebStorm Mac 버전

WebStorm Mac 버전

유용한 JavaScript 개발 도구

MinGW - Windows용 미니멀리스트 GNU

MinGW - Windows용 미니멀리스트 GNU

이 프로젝트는 osdn.net/projects/mingw로 마이그레이션되는 중입니다. 계속해서 그곳에서 우리를 팔로우할 수 있습니다. MinGW: GCC(GNU Compiler Collection)의 기본 Windows 포트로, 기본 Windows 애플리케이션을 구축하기 위한 무료 배포 가능 가져오기 라이브러리 및 헤더 파일로 C99 기능을 지원하는 MSVC 런타임에 대한 확장이 포함되어 있습니다. 모든 MinGW 소프트웨어는 64비트 Windows 플랫폼에서 실행될 수 있습니다.

드림위버 CS6

드림위버 CS6

시각적 웹 개발 도구

Atom Editor Mac 버전 다운로드

Atom Editor Mac 버전 다운로드

가장 인기 있는 오픈 소스 편집기

SublimeText3 영어 버전

SublimeText3 영어 버전

권장 사항: Win 버전, 코드 프롬프트 지원!