SVG 漸變學習（四）

2021-10-23 17:59:07 字數 1054 閱讀 9343

漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同乙個元素上。

在 svg 中，有兩種主要的漸變型別：

可用來定義 svg 的線性漸變。

標籤必須巢狀在 的內部。標籤是 definitions 的縮寫，它可對諸如漸變之類的特殊元素進行定義。

線性漸變可被定義為水平、垂直或角形的漸變：

①水平漸變

<?xml version="1.0" standalone="no"?>
**解釋：

②垂直漸變

用來定義放射性漸變。

標籤必須巢狀在 中。標籤是 definitions 的縮寫，它允許對諸如漸變等特殊元素進行定義。

<?xml version="1.0" standalone="no"?>
**解釋：標籤的 id 屬性可為漸變定義乙個唯一的名稱，fill:url(#grey_blue) 屬性把 ellipse 元素鏈結到此漸變，cx、cy 和 r 屬性定義外圈，而 fx 和 fy 定義內圈 漸變的顏色範圍可由兩種或多種顏色組成。每種顏色通過乙個 標籤來規定。offset 屬性用來定義漸變的開始和結束位置。

SVG 徑向漸變

上一節我們講的是線性漸變，本節我們來學習徑向漸變。徑向漸變可以理解為以某一點為圓心，顏色值沿半徑方向進行漸變。如何建立徑向漸變 我們可以通過元素建立乙個 svg 的徑向漸變。徑向漸變的使用其實和線性漸變差不多，也是巢狀在元素中使用，在使用時需要定義乙個唯一的id名稱，然後通過fill屬性引用。示例 ...

SVG 徑向漸變

上一節我們講的是線性漸變，本節我們來學習徑向漸變。徑向漸變可以理解為以某一點為圓心，顏色值沿半徑方向進行漸變。如何建立徑向漸變 我們可以通過元素建立乙個 svg 的徑向漸變。徑向漸變的使用其實和線性漸變差不多，也是巢狀在元素中使用，在使用時需要定義乙個唯一的id名稱，然後通過fill屬性引用。示例 ...

SVG入門 漸變

前言 svg並非只能簡單填充顏色和描邊，更令人興奮的是，你還可以建立和並在填充和描邊上應用漸變色。有兩種型別的漸變 線性漸變和徑向漸變。你必須給漸變內容指定乙個id屬性，否則文件內的其他元素就不能引用它。為了讓漸變能被重複使用，漸變內容需要定義在標籤內部，而不是定義在形狀上面。線性漸變 線性漸變沿著...