選單
×
我的 W3Schools 獲取證書 Spaces 教師專用 Plus 獲取證書 Spaces 教師專用 Plus
   ❮     
HTML CSS JAVASCRIPT SQL PYTHON JAVA PHP HOW TO W3.CSS C C++ C# BOOTSTRAP REACT MYSQL JQUERY EXCEL XML DJANGO NUMPY PANDAS NODEJS R TYPESCRIPT ANGULAR GIT POSTGRESQL MONGODB ASP AI GO KOTLIN SASS VUE DSA GEN AI SCIPY AWS CYBERSECURITY DATA SCIENCE
     ❯   

SVG 示例

❮ 上一篇 下一篇 ❯

動手實踐示例

下面的示例將 SVG 程式碼直接嵌入到 HTML 程式碼中。

所有主流瀏覽器都支援 SVG。

SVG 矩形

帶有六個基本屬性和填充顏色的矩形 帶有填充和描邊的矩形 帶有透明度的矩形 帶有透明度的矩形 2 帶有圓角的矩形

Examples explained

SVG 圓形

一個圓形 一個帶邊框的圓形 一個帶透明度的圓形

Examples explained

SVG 橢圓

一個橢圓 疊在一起的三個橢圓 兩個橢圓

Examples explained

SVG 線條

一條線 一條粗水平線 一條粗垂直線

Examples explained

SVG 多邊形

一個三邊形 一個四邊形 一個六邊形 一顆星 另一顆星

Examples explained

SVG 折線

一條折線 另一條折線

Examples explained

SVG 路徑

一條路徑 一條二次貝塞爾曲線

Examples explained

SVG 文字

使用 SVG 編寫簡單文字 無填充的文字 帶填充和描邊的文字 使用 rotate 屬性旋轉文字的每個字母 使用 transform 屬性旋轉整個文字 在 <text> 元素中使用 <tspan> 元素

Examples explained

SVG textPath

使用 <textPath> 元素沿路徑排列文字 使用 <textPath> 元素和 textLength 屬性沿路徑排列文字

Examples explained

SVG 連結

文字作為連結 圖形作為連結

Examples explained

SVG 圖片

插入圖片 在圓形上方顯示圖片，並在圖片下方新增文字

Examples explained

SVG 標記

帶開始標記和結束標記的線 帶開始標記、中間標記和結束標記的折線

Examples explained

SVG 填充

使用 fill 屬性設定圖形的填充顏色 使用 fill-opacity 屬性設定填充顏色的透明度 為多邊形使用 fill-rule 屬性，值為 "evenodd" 為多邊形使用 fill-rule 屬性，值為 "nonzero"

Examples explained

SVG 描邊

使用 stroke 屬性設定圖形的輪廓顏色 使用 stroke 屬性設定線的顏色 使用 stroke-width 屬性設定輪廓寬度 使用 stroke-width 屬性設定線的寬度 使用 stroke-opacity 屬性設定輪廓的透明度 使用 stroke-opacity 屬性設定線的透明度 使用 stroke-linecap 屬性設定線的不同端點樣式 使用 stroke-dasharray 屬性建立虛線 使用 stroke-dasharray 屬性建立虛線輪廓 使用 stroke-linejoin 屬性建立不同的轉角形狀

Examples explained

SVG 濾鏡簡介

使用 <feGaussianBlur> 濾鏡模糊 SVG 圖形

Examples explained

SVG 濾鏡模糊效果

使用 <feGaussianBlur> 濾鏡建立模糊效果 使用 stdDeviation 屬性設定模糊量

Examples explained

SVG 濾鏡陰影 1

使用 <feDropShadow> 濾鏡建立陰影效果

Examples explained

SVG 濾鏡陰影 2

偏移矩形，然後將原始矩形與偏移影像混合 模糊偏移影像 將陰影設為黑色 將陰影視為顏色矩陣 feBlend 濾鏡 濾鏡 1 濾鏡 2 濾鏡 3 濾鏡 4 濾鏡 5 濾鏡 6

Examples explained

SVG 線性漸變

帶有兩種顏色的水平線性漸變 帶有三種顏色的水平線性漸變 帶有兩種顏色的垂直線性漸變 帶有文字的水平線性漸變 帶有兩種顏色的角度線性漸變

Examples explained

SVG 徑向漸變

帶有兩種顏色的徑向漸變 帶有三種顏色的徑向漸變 cx 和 cy 為 25% 的徑向漸變 spreadMethod="reflect" 的徑向漸變 spreadMethod="repeat" 的徑向漸變 帶有兩種顏色和 stop-opacity 的徑向漸變

Examples explained

SVG 圖案

建立一個由小圓組成的矩形 建立一個由小淺藍色矩形和漸變圓組成的矩形

Examples explained

SVG 變換

Translate() 函式：水平移動物件 Translate() 函式：垂直移動物件 Translate() 函式：水平和垂直移動物件 Scale() 函式：縮放物件 Scale() 函式：垂直縮放物件 Scale() 函式：水平縮放物件 Rotate() 函式：按角度旋轉物件 SkewX() 函式：沿 x 軸按角度傾斜物件 SkewY() 函式：沿 y 軸按角度傾斜物件

Examples explained

SVG 裁剪和遮罩

<clipPath>：移除元素的某一部分 <mask>：為元素應用矩形遮罩 <mask>：為元素應用圓形遮罩 <mask>：填充顏色和透明度 <mask>：遮罩中的漸變

Examples explained

SVG 動畫

<set>：在指定持續時間內設定某個屬性的值 <animate>：為元素的某個屬性設定動畫 <animate>：保持動畫 <animateTransform>：為目標元素設定 transform 屬性動畫 <animateMotion>：設定元素沿運動路徑移動的方式

Examples explained

SVG 指令碼

使用 JavaScript 更改屬性值 使用 JavaScript 更改 CSS 使用 JavaScript 更改屬性值和 CSS 使用 JavaScript 為元素設定動畫

Examples explained

SVG 雜項

矩形在 5 秒內反覆消失 一個不斷增長的矩形，將改變顏色 三個將改變顏色的矩形 文字沿運動路徑移動 文字沿運動路徑移動、旋轉和縮放 文字沿運動路徑移動、旋轉和縮放 + 一個不斷增長的矩形，將改變顏色 旋轉的橢圓

❮ 上一篇 下一篇 ❯
PLUS
空格
獲取證書
面向教師
面向企業
聯絡我們
×

聯絡銷售

如果您想將 W3Schools 服務用於教育機構、團隊或企業，請傳送電子郵件給我們
sales@w3schools.com

報告錯誤

如果您想報告錯誤，或想提出建議，請傳送電子郵件給我們
help@w3schools.com

熱門教程
HTML 教程
CSS 教程
JavaScript 教程
操作方法教程
SQL 教程
Python 教程
W3.CSS 教程
Bootstrap 教程
PHP 教程
Java 教程
C++ 教程
jQuery 教程
熱門參考
HTML 參考
CSS 參考
JavaScript 參考
SQL 參考
Python 參考
W3.CSS 參考
Bootstrap 參考
PHP 參考
HTML 顏色
Java 參考
Angular 參考
jQuery 參考
熱門示例
HTML 示例
CSS 示例
JavaScript 示例
操作方法示例
SQL 示例
Python 示例
W3.CSS 示例
Bootstrap 示例
PHP 示例
Java 示例
XML 示例
jQuery 示例
獲取證書
 HTML 證書
CSS 證書
JavaScript 證書
前端證書
SQL 證書
Python 證書
PHP 證書
jQuery 證書
Java 證書
C++ 證書
C# 證書
XML 證書
論壇 關於 學院
W3Schools 經過最佳化，旨在方便學習和培訓。示例可能經過簡化，以提高閱讀和學習體驗。
教程、參考資料和示例會不斷審查，以避免錯誤，但我們無法保證所有內容的完全正確性。
使用 W3Schools 即表示您已閱讀並接受我們的使用條款、Cookie 和隱私政策。

版權所有 1999-2024 Refsnes Data。保留所有權利。W3Schools 由 W3.CSS 提供支援。