SVG <radialGradient> 徑向漸變
徑向漸變通俗的講,以某一點為圓心,顏色值沿著半徑方向漸變。
使用<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>
程式碼執行效果截圖如下:
上面是一個非常簡單的徑向漸變效果。
<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>
程式碼執行效果截圖如下:
程式碼分析如下:
(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>
程式碼執行效果截圖如下:
為了便於觀察效果,上面同樣覆蓋了一個具有透明度的圓。
可以看到此次漸變的起始點並不在圓心位置。
程式碼分析如下:
(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>
程式碼執行效果截圖如下:
通常情況下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>
程式碼效果執行效果截圖如下:
前面所有的程式碼,徑向漸變的屬性值都是百分比形式存在。
這可能給閱讀者一個誤解,以為屬性值只能是百分比,其實並不是這樣。
上述程式碼給予的屬性值都是絕對值,具體參閱線性漸變一文中gradientUnits屬性相關知識。
相關文章
- canvas createRadialGradient() 徑向漸變Canvas
- CSS radial-gradient()徑向漸變CSS
- background: radial-gradient徑向漸變
- 使用canvas來完成線性漸變和徑向漸變的功能Canvas
- CSS3 radial-gradient()徑向漸變CSSS3
- SVG <linearGradient> 線性漸變SVG
- SVG 漸變動畫效果SVG動畫
- SVG線性漸變程式碼SVG
- 10個demo示例學會CSS3 radial-gradient徑向漸變CSSS3
- lightroom中文基礎教程:使用徑向漸變濾鏡調整夕陽OOM
- CSS和SVG實現文字漸變、描邊、投影CSSSVG
- Dreamweaver中CSS怎麼製作徑向圓形漸變的五種方法CSS
- svg和css3建立環形漸變進度條SVGCSSS3
- 手把手使用 SVG + CSS 實現漸變進度環效果SVGCSS
- SVG <textPath>文字路徑SVG
- SVG <path> 路徑元素SVG
- SVG 文字路徑動畫SVG動畫
- css奇技淫巧-色彩漸變與動態漸變CSS
- SVG 立方體內嵌路徑拼接SVG
- CSS背景漸變CSS
- CSS 背景漸變CSS
- css 字型漸變CSS
- Swift 漸變 imageSwift
- Swift 漸變 UISliderSwiftUIIDE
- 向強大的SVG邁進SVG
- ECharts柱條漸變色設定以及常用漸變色Echarts
- Photoshop教程_PS漸變工具找不到,怎樣匯入ps漸變樣式?ps漸變使用教程.
- iOS CAGradientLayer漸變色iOS
- css3 漸變CSSS3
- background 線性漸變
- iOS UIView漸變色iOSUIView
- css3漸變CSSS3
- SVG animateTransform變換動畫SVGORM動畫
- 網頁影像漸變的方法(HTML+CSS) (漸變與切換)網頁HTMLCSS
- 改變SVG圖的顏色SVG
- SVG transform變換深入理解SVGORM
- CAGradientLayer設定漸變色
- Photoshop中的漸變工具