SVG 徑向漸變

上一節我們講的是線性漸變，本節我們來學習徑向漸變。徑向漸變可以理解為以某一點為圓心，顏色值沿半徑方向進行漸變。

如何建立徑向漸變

我們可以通過元素建立乙個 svg 的徑向漸變。徑向漸變的使用其實和線性漸變差不多，也是巢狀在元素中使用，在使用時需要定義乙個唯一的id名稱，然後通過fill屬性引用。

示例：定義乙個徑向漸變的圓：

>

>
charset
="utf-8"
>
>
svg學習(9xkd.com)title
>
rel=
"stylesheet"
type
="text/css"
href
="./style.css"
>
head
>
>

上述**中在元素中定義了乙個id屬性，方便後面的引用。內通過元素定義了三個顏色，元素中的三個屬性在上一節中講到過。

除此之外，元素中的引數和元素中的屬性還是有一些不同，如下所示：

屬性描述

r圓的半徑

cx漸變的中心點 x 座標，要移動漸變的位置，可以改變這個值

cy漸變的中心點 y 座標，要移動漸變的位置，可以改變這個值

fx漸變的焦點 x 座標，可以用於移動漸變第乙個顏色結點的位置

fy漸變的焦點 y 座標，可以用於移動漸變第乙個顏色結點的位置

fr定義徑向漸變的焦點的半徑，預設值為 0%

示例：例如建立乙個橢圓漸變：

>

>
charset
="utf-8"
>
>
svg學習(9xkd.com)title
>
rel=
"stylesheet"
type
="text/css"
href
="./style.css"
>
head
>
>

這個橢圓漸變中定義了五個顏色，然後通過cx和cy確定漸變中心點位置，fx和fy確定漸變第乙個顏色的結點的位置。

SVG 徑向漸變

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

線性漸變和徑向漸變

linear gradient direction，color 寫法 background webkit linear gradient direction，color 1.direction 方向，預設方向是自上而下 寫法有 1.background webkit linear gradient ...

線性漸變和徑向漸變

格式 background image linear gradient 方向，起始顏色 終止顏色 方向 to left to right to top to bottom 角度 360 180 45 從左下到右上 90 相當於 to right 從左到右 135 從左上到右下 180 從上到下 di...