Community Learn Tools Library Leisure
search
English
Home > Web Front-end > H5 Tutorial > SVG基础|SVG DEFS元素、SYMBOL元素和USE元素

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

WBOY
Release： 2016-05-17 09:07:37
Original
2127 people have browsed it
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

Related labels：
html
source：php.cn
Previous article：HTML5 CANVAS：像素处理 Next article：响应式编程（Reactive Programming）介绍
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Latest Articles by Author
Latest Issues
Regular expression filter for MERN stack search boxes and checkboxes I'm trying to understand how the MERN stack works together by learning by doing, and I'm f...
From 2024-04-06 14:53:12
0
1
425
Can PDF files run HTML5 and Javascript? I have a stupid idea to try and make a program that won't be blocked on any computer since...
From 2024-04-05 12:57:00
0
1
456
Prestashop installation issue: Unable to install custom module I am new to Prestashop module development. I'm trying to build Amy's first prestashop modu...
From 2024-04-03 19:24:44
0
1
402
PHP Tutorial: How to upload text and images to Linkedin using PHP? I try to upload text, images and links using LinkedinsRestAPI (https://learn.microsoft.com...
From 2024-04-03 18:42:29
0
1
420
Unable to receive information from my mySQL database despite having seen tutorials doing the exact same thing So I'm trying to make a program that reads and writes to a MySQL database, which led me to...
From 2024-04-03 14:46:04
0
1
298
Related Topics
More>
Popular Recommendations
Popular Tutorials
More>
Related Tutorials
Popular Recommendations
Latest courses
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template