SVG 放射性漸變
放射性漸變
<radialGradient> 用來定義放射性漸變。
<radialGradient> 標簽必須嵌套在 <defs> 中。<defs> 標簽是 definitions 的縮寫,它允許對諸如漸變等特殊元素進行定義。
請把下面的代碼拷貝到記事本,然后把文件保存為 "radial1.svg"。把此文件放入您的 web 目錄:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="50%" cy="50%" r="50%" fx="50%" fy="50%"> <stop offset="0%" >代碼解釋:
<radialGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱,fill:url(#grey_blue) 屬性把 ellipse 元素鏈接到此漸變,cx、cy 和 r 屬性定義外圈,而 fx 和 fy 定義內(nèi)圈 漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規(guī)定。offset 屬性用來定義漸變的開始和結(jié)束位置。查看例子
另一個例子:
<?xml version="1.0" standalone="no"?> <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"> <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> <defs> <radialGradient id="grey_blue" cx="20%" cy="40%" r="50%" fx="50%" fy="50%"> <stop offset="0%" >查看例子