| Z |
將路徑封閉到 |
</tr>
</tbody>
</table>
能以大寫或小寫形式使用這些命令。當命令為大寫時，應用絕對位置。當它為小寫時，應用相對位置。提供所有命令示例已超出了本文的范圍。但是，以下示例會演示它們的基本使用。
可以使用 path 元素從本文前面的示例創建任何簡單的形狀。清單 12 使用 path 元素創建了一個基本的三角形。
清單 12. 使用 path 元素創建一個三角形
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M150 0 L75 200 L225 200 Z" style="fill:red"/>
</svg> 清單 12 中的代碼會生成演示 12 中的圖形。
演示 12. 使用 path 元素的三角形
這組命令使用 d 屬性定義。在本例中，從 x 坐標 150 和 y 坐標 0 處開始繪制，這在移動到命令 ( M150 0 ) 中定義。然后再使用 “連線到” 命令繪制一條直線連接到 x 坐標 75 和 y 坐標 200 的位置 ( L75 200 )。接下來，使用另一個 “連線到” 命令繪制另一條線 ( L225 200 )。最后，使用 “封閉到” 命令封閉圖形 ( Z )。 Z 命令沒有提供任何坐標，因為要關閉您所在的路徑，根據定義，要繪制一條從當前位置到圖形起點（在本例中為 x = 150 y =0）的線。
這里的意圖是展示一個基本示例；如果您想要的只是一個簡單的三角形，最好使用 polygon 標記。
path 元素的真正強大之處是創建自定義形狀的能力，如清單 13 所示。該示例來自萬維網聯盟 (W3C) 文檔 可縮放矢量圖形 (SVG) 1.1（第二版） （參見 參考資料 ）。
清單 13. 使用 path 元素創建一個自定義形狀
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
fill="red" stroke="blue" stroke-width="5"/>
<path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
fill="yellow" stroke="blue" stroke-width="5"/>
<path d="M600,350 l 50,-25
a25,25 -30 0,1 50,-25 l 50,-25
a25,50 -30 0,1 50,-25 l 50,-25
a25,75 -30 0,1 50,-25 l 50,-25
a25,100 -30 0,1 50,-25 l 50,-25"
fill="none" stroke="red" stroke-width="5"/>
</svg> 清單 13 中的代碼會生成演示 13 中的圖形。
演示 13. 使用 path 元素的自定義形狀
使用 path 元素，可以創建復雜的圖形，比如圖表和波浪線。請注意，這個示例使用了多個 path 元素。當創建圖形時，根 SVG 標記中可以包含多個繪圖元素。
過濾器和漸變
除了目前為止許多示例中的基本 CSS 樣式，SVG 圖形還支持使用過濾器和漸變。本節將介紹如何向 SVG 圖形應用過濾器和漸變。
過濾器
可以使用過濾器向 SVG 圖形應用特殊的效果。SVG 支持以下過濾器。
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<filter id="f1" x="0" y="0"
width="200%" height="200%">
<feOffset result="offOut" in="SourceAlpha"
dx="20" dy="20"/>
<feGaussianBlur result="blurOut"
in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic"
in2="blurOut" mode="normal"/>
</filter>
</defs>
<rect width="90" height="90" stroke="green"
stroke-width="3" fill="yellow" filter="url(#f1)"/>
</svg> 清單 14 中的代碼會生成圖 14 中的圖形。
圖 14. 一個矩形的投影效果
過濾器在 def （表示定義）元素中定義。本示例中的過濾器分配了一個 id "f1" 。 filter 標記本身擁有定義過濾器的 x 和 y 坐標及寬度和高度的屬性。在 filter 標記中，可以使用想要的過濾器元素并將其屬性設置為想要的值。
定義過濾器之后，使用 filter 屬性將它與一個特定圖形關聯，如 rect 元素 中所示。將 url 值設置為您分配給過濾器的 id 屬性的值。
漸變
漸變 是從一種顏色到另一種顏色逐漸的過渡。漸變具有兩種基本形式：線性和徑向漸變。所應用的漸變類型由您使用的元素確定。以下示例展示了應用于一個橢圓形的線性和徑向漸變。
清單 15 創建了一個具有線性漸變的橢圓。
清單 15. 創建一個具有線性漸變的橢圓
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<linearGradient id="grad1" x1="0%" y1="0%"
x2="100%" y2="0%">
<stop offset="0%"
style="stop-color:rgb(255,255,0);stop-opacity:1"/>
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)"/>
</svg> 清單 15 中的代碼會生成圖 15 中的圖形。
圖 15. 具有線性漸變的橢圓
清單 16 創建了一個具有徑向漸變的橢圓。
清單 16. 創建一個具有徑向漸變的橢圓
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%"
r="50%" fx="50%" fy="50%">
<stop offset="0%"
style="stop-color:rgb(255,255,255);stop-opacity:0"/>
<stop offset="100%"
style="stop-color:rgb(255,0,0);stop-opacity:1"/>
</radialGradient>
</defs>
<ellipse cx="200" cy="70" rx="85" ry="55"
fill="url(#grad1)"/>
</svg> 清單 16 中的代碼會生成圖 16 中的圖形。
圖 16. 具有徑向漸變的橢圓
像過濾器一樣，漸變在 def 元素內定義。每個漸變分配有一個 id 。漸變屬性（比如顏色）可使用 stop 元素在漸變標記內設置。要將漸變應用于圖形，可以將 fill 屬性的 url 值設置為想要的漸變的 id 。
文本和 SVG
除了基本形狀，還可以使用 SVG 生成文本，如清單 17 所示。
清單 17. 使用 SVG 創建文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<text x="0" y="15" fill="red">I love SVG</text>
</svg> 清單 17 中的代碼會生成圖 17 中的圖形。
圖 17. SVG 文本
此示例使用了一個 text 元素來創建句子 I love SVG 。當使用 text 元素時，要顯示的實際文本在開始和結束 text 元素之間。
您可以沿多個軸，以及甚至沿多條路徑顯示文本。清單 18 沿一條弧形路徑顯示文本。
清單 18. 沿一條弧形路徑創建文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<path id="path1" d="M75,20 a1,1 0 0,0 100,0"/>
</defs>
<text x="10" y="100" style="fill:red;">
<textPath xlink:href="#path1">I love SVG I love SVG</textPath>
</text>
</svg> 清單 18 中的代碼會生成圖 18 中的圖形。
圖 18. 一個弧形路徑上的文本
在此示例中，向根 SVG 標記添加了一個額外的 XML 命名空間 xlink 。用戶顯示文本的弧形路徑在 def 元素內創建，所以該路徑不會在圖形中實際渲染出來。要顯示的文本嵌套在一個 textPath 元素內，該元素使用 xlink 命名空間引用想要的路徑的 id 。
與其他 SVG 圖形一樣，也可以向文本應用過濾器和漸變。清單 19 向一些文本應用了一個過濾器和一種漸變。
清單 19. 創建具有過濾器和漸變的文本
<svg xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink">
<defs>
<radialGradient id="grad1" cx="50%" cy="50%"
r="50%" fx="50%" fy="50%">
<stop offset="0%"
style="stop-color:red; stop-opacity:0"/>
<stop offset="100%"
style="stop-color:rgb(0,0,0);stop-opacity:1"/>
</radialGradient>
<filter id="f1" x="0" y="0"
width="200%" height="200%">
<feOffset result="offOut"
in="SourceAlpha" dx="20" dy="20"/>
<feGaussianBlur result="blurOut"
in="offOut" stdDeviation="10"/>
<feBlend in="SourceGraphic"
in2="blurOut" mode="normal"/>
</filter>
</defs>
<text x="10" y="100" style="fill:url(#grad1); font-size: 30px;"
filter="url(#f1)">
I love SVG I love SVG
</text>
</svg> 清單 19 中的代碼會生成圖 19 中的圖形。
圖 19. 具有過濾器和漸變的文本
向網頁添加 SVG XML
創建 SVG XML 之后，可采用多種方式將它包含在 HTML 頁面中。第一種方法是直接將 SVG XML 嵌入到 HTML 文檔中，如清單 20 所示。
清單 20. 直接將 SVG XML 嵌入 HTML 文檔
<html>
<head>
<title>Embedded SVG</title>
</head>
<body style="height: 600px;width: 100%; padding: 30px;">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" fill="red"/>
</svg>
</body>
</html> 此方法可能最簡單，但它不支持重用。請記住，可以使用 .svg 擴展名保存 SVG XML 文件。當將 SVG 圖形保存在 .svg 文件中時，您可以使用 embed 、 object 和 iframe 元素來將它包含在網頁中。清單 21 顯示了使用 embed 元素包含 SVG XML 文件的代碼。
清單 21. 使用 embed 元素包含一個 SVG XML 文件
<embed src="circle.svg" type="image/svg+xml" />
清單 22 顯示了如何使用 object 元素包含一個 SVG XML 文件。
清單 22. 使用 object 元素包含一個 SVG XML 文件
<object data="circle.svg" type="image/svg+xml"></object>
清單 23 給出了使用 iframe 元素包含一個 SVG XML 文件的代碼。
清單 23. 使用 iframe 元素包含一個 SVG XML 文件
<iframe src="circle1.svg"></iframe>
當使用其中一種方法時，可以將同一個 SVG 圖形包含在多個頁面中，并編輯 .svg 源文件來進行更新。
結束語
本文介紹了使用 SVG 格式創建圖形的基礎知識。您學習了如何使用內置的集合元素（比如線、矩形、圓等）創建基本形狀。您還學習了如何通過發出一系列命令（比如移動到、連線到和使用弧線連接到），使用 path 元素創建復雜的圖形。本文還探討了如何對 SVG 圖形應用過濾器和漸變，包括文本圖形，以及如何在 HTML 頁面中包含 SVG 圖形。
</div>
</span></span></span></span>
本文由用戶
cf4s45ddd 自行上傳分享，僅供網友學習交流。所有權歸原作者，若您的權利被侵害，請聯系管理員。
轉載本站原創文章，請注明出處，并保留原始鏈接、圖片水印。
本站是一個以用戶分享為主的開源技術平臺，歡迎各類分享！
sesese色