SVG <radialGradient> 徑向漸變

admin發表於2018-11-08
SVG

徑向漸變通俗的講，以某一點為圓心，顏色值沿著半徑方向漸變。

使用<radialGradient>元素可以建立一個SVG的徑向漸變。

與徑向漸變相對應的是線性漸變，具體參閱SVG <linearGradient> 線性漸變一章節。

首先看一段程式碼例項：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:500px;
  height:400px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
        fx="40%" fy="50%"
        cx="50%" cy="50%"
        r="50%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="400" height="300" fill="url(#radial)" />
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150543szvi1gc9499oc0qk.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

上面是一個非常簡單的徑向漸變效果。

<radialGradient>元素與<linearGradient>元素具有很多同名屬性或者子元素。

它們的功能原理是一致的，本文不再累贅，具體用法參閱SVG <linearGradient> 線性漸變一章節。

下面結合程式碼介紹一下<radialGradient>元素所獨有的屬性。

一.cx、cy和r屬性：

文章開頭介紹過，徑向漸變是以某一點為圓心，顏色值沿著半徑方向漸變。

那麼我們需要確立映象漸變的圓心座標和半徑尺寸。程式碼如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
        fx="50%" fy="50%"
        cx="50%" cy="50%"
        r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
      
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
      r="80"
      fill="green"
      fill-opacity="0.2"/>
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150619kzwak6nogg6kpzg1.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

程式碼分析如下：

（1）.cx與cy分別確定圓心的橫座標和縱座標、

（2）.r規定圓的半徑尺寸。

（3）.使用<rect>元素繪製一個與徑向漸變同尺寸的具有透明度的圓，然後將其覆蓋於徑向漸變之上，以此便於觀察<radialGradient>元素的cx、cy和r屬性的功能。

二.fx和fy屬性:

上一段程式碼演示的是從圓心開始向外規則的漸變，但並不是所有的規則都是如此。

程式碼例項如下：

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
        fx="45%" fy="50%"
        cx="50%" cy="50%"
        r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
      r="80"
      fill="green"
      fill-opacity="0.2"/>
  </svg>                           
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150653icc2wh343e9x4lv4.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

為了便於觀察效果，上面同樣覆蓋了一個具有透明度的圓。

可以看到此次漸變的起始點並不在圓心位置。

程式碼分析如下：

（1）.fx與fy屬性用來規定漸變焦點座標。

（2）.焦點通俗的說就是漸變的起點位置，此位置處顏色值保持最初狀態。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
        fx="70%" fy="50%"
        cx="50%" cy="50%"
        r="10%">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
      r="80"
      fill="green"
      fill-opacity="0.2"/>
    </svg>                    
</body>
</html>

程式碼執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150722d583ay98kbl88g79.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

通常情況下fx與fy規定的焦點位於圓內，當然也可以將其座標設定在圓的範圍之外。

但是並不推薦進行如此操作，不同的瀏覽器可能會進行不同的處理。

上面程式碼截圖是在谷歌瀏覽器中的效果，焦點座標會伸展出兩條魚圓相切線，形成一個三角形區域。

在此三角形區域內，具有徑向漸變效果。

[HTML] 純文字檢視 複製程式碼執行程式碼
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="http://www.softwhy.com/" />
<title>螞蟻部落</title>
<style>
svg {
  width:800px;
  height:800px;
}
</style>
</head>
<body>
  <svg>
    <defs>
      <radialGradient id="radial"
       gradientUnits="userSpaceOnUse"
        fx="350" fy="400"
        cx="400" cy="400"
        r="80">
        <stop offset="0%" stop-color="red" stop-opacity="1" />
        <stop offset="100%" stop-color="blue" stop-opacity="1" />
      </radialGradient>
    </defs>
    <rect x="0" y="0" width="800" height="800" fill="url(#radial)" />
    <circle cx="400" cy="400"
      r="80"
      fill="green"
      fill-opacity="0.2"/>
  </svg>                           
</body>
</html>

程式碼效果執行效果截圖如下：

a:3:{s:3:\"pic\";s:43:\"portal/201811/08/150752dlo94l7t1110o0ov.png\";s:5:\"thumb\";s:0:\"\";s:6:\"remote\";N;}

前面所有的程式碼，徑向漸變的屬性值都是百分比形式存在。

這可能給閱讀者一個誤解，以為屬性值只能是百分比，其實並不是這樣。

上述程式碼給予的屬性值都是絕對值，具體參閱線性漸變一文中gradientUnits屬性相關知識。

相關文章