搜尋
首頁web前端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
H5:網絡開發的新功能和功能H5:網絡開發的新功能和功能Apr 29, 2025 am 12:07 AM

H5帶來了多項新功能和能力,極大提升了網頁的互動性和開發效率。 1.語義化標籤如、增強了SEO。 2.多媒體支持通過和標籤簡化了音視頻播放。 3.Canvas繪圖提供了動態圖形繪製工具。 4.本地存儲通過localStorage和sessionStorage簡化了數據存儲。 5.地理位置API便於開發基於位置的服務。

H5:HTML5的關鍵改進H5:HTML5的關鍵改進Apr 28, 2025 am 12:26 AM

HTML5帶來了五個關鍵改進:1.語義化標籤提升了代碼清晰度和SEO效果;2.多媒體支持簡化了視頻和音頻嵌入;3.表單增強簡化了驗證;4.離線與本地存儲提高了用戶體驗;5.畫布與圖形功能增強了網頁的可視化效果。

HTML5:標準及其對Web開發的影響HTML5:標準及其對Web開發的影響Apr 27, 2025 am 12:12 AM

HTML5的核心特性包括語義化標籤、多媒體支持、離線存儲與本地存儲、表單增強。 1.語義化標籤如、等,提升代碼可讀性和SEO效果。 2.和標籤簡化多媒體嵌入。 3.離線存儲和本地存儲如ApplicationCache和LocalStorage,支持無網絡運行和數據存儲。 4.表單增強引入新輸入類型和驗證屬性,簡化處理和驗證。

H5代碼示例:實際應用和教程H5代碼示例:實際應用和教程Apr 25, 2025 am 12:10 AM

H5提供了多種新特性和功能,極大地增強了前端開發的能力。 1.多媒體支持:通過和元素嵌入媒體,無需插件。 2.畫布(Canvas):使用元素動態渲染2D圖形和動畫。 3.本地存儲:通過localStorage和sessionStorage實現數據持久化存儲,提升用戶體驗。

H5和HTML5之間的連接:相似性和差異H5和HTML5之間的連接:相似性和差異Apr 24, 2025 am 12:01 AM

H5和HTML5是不同的概念:HTML5是HTML的一個版本,包含新元素和API;H5是基於HTML5的移動應用開發框架。 HTML5通過瀏覽器解析和渲染代碼,H5應用則需要容器運行並通過JavaScript與原生代碼交互。

H5代碼的基礎:密鑰元素及其目的H5代碼的基礎:密鑰元素及其目的Apr 23, 2025 am 12:09 AM

HTML5的關鍵元素包括、、、、、等,用於構建現代網頁。 1.定義頭部內容,2.用於導航鏈接,3.表示獨立文章內容,4.組織頁面內容,5.展示側邊欄內容,6.定義頁腳,這些元素增強了網頁的結構和功能性。

HTML5和H5:了解常見用法HTML5和H5:了解常見用法Apr 22, 2025 am 12:01 AM

HTML5和H5沒有區別,H5是HTML5的簡稱。 1.HTML5是HTML的第五個版本,增強了網頁的多媒體和交互功能。 2.H5常用於指代基於HTML5的移動網頁或應用,適用於各種移動設備。

HTML5:現代網絡的基礎(H5)HTML5:現代網絡的基礎(H5)Apr 21, 2025 am 12:05 AM

HTML5是超文本標記語言的最新版本,由W3C標準化。 HTML5引入了新的語義化標籤、多媒體支持和表單增強,提升了網頁結構、用戶體驗和SEO效果。 HTML5引入了新的語義化標籤,如、、、等,使網頁結構更清晰,SEO效果更好。 HTML5支持多媒體元素和,無需第三方插件,提升了用戶體驗和加載速度。 HTML5增強了表單功能,引入了新的輸入類型如、等,提高了用戶體驗和表單驗證效率。

See all articles

熱AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智慧驅動的應用程序,用於創建逼真的裸體照片

AI Clothes Remover

AI Clothes Remover

用於從照片中去除衣服的線上人工智慧工具。

Undress AI Tool

Undress AI Tool

免費脫衣圖片

Clothoff.io

Clothoff.io

AI脫衣器

Video Face Swap

Video Face Swap

使用我們完全免費的人工智慧換臉工具,輕鬆在任何影片中換臉!

熱工具

EditPlus 中文破解版

EditPlus 中文破解版

體積小,語法高亮,不支援程式碼提示功能

SublimeText3漢化版

SublimeText3漢化版

中文版,非常好用

WebStorm Mac版

WebStorm Mac版

好用的JavaScript開發工具

ZendStudio 13.5.1 Mac

ZendStudio 13.5.1 Mac

強大的PHP整合開發環境

SublimeText3 Mac版

SublimeText3 Mac版

神級程式碼編輯軟體(SublimeText3)