?? svg 線形漸變.htm
字號:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3c.org/TR/1999/REC-html401-19991224/loose.dtd">
<!-- saved from url=(0050)http://www.w3school.com.cn/svg/svg_grad_linear.asp -->
<HTML xmlns="http://www.w3.org/1999/xhtml"><HEAD><TITLE>SVG 線形漸變</TITLE>
<META http-equiv=Content-Type content="text/html; charset=gb2312">
<META http-equiv=Content-Language content=zh-cn>
<META content=all name=robots>
<META content=w3school.com.cn name=author>
<META content="Copyright W3school.com.cn All Rights Reserved." name=Copyright>
<META content=true name=MSSmartTagsPreventParsing>
<META http-equiv=imagetoolbar content=false><LINK href="SVG 線形漸變_files/c1.css"
type=text/css rel=stylesheet>
<META content="MSHTML 6.00.3790.4134" name=GENERATOR></HEAD>
<BODY id=xml>
<DIV id=wrapper>
<DIV id=header>
<H1><A title=點擊此處，返回首頁
href="http://www.w3school.com.cn/index.html">w3school在線教程</A></H1></DIV>
<DIV id=navfirst>
<UL id=menu>
<LI id=h><A title=HTML教程 href="http://www.w3school.com.cn/h.asp">HTML教程</A>
</LI>
<LI id=x><A title=XML教程 href="http://www.w3school.com.cn/x.asp">XML教程</A>
</LI>
<LI id=b><A title=瀏覽器腳本 href="http://www.w3school.com.cn/b.asp">瀏覽器腳本</A>
</LI>
<LI id=s><A title=服務器腳本 href="http://www.w3school.com.cn/s.asp">服務器腳本</A>
</LI>
<LI id=d><A title="dot net教程" href="http://www.w3school.com.cn/d.asp">dot
net教程</A> </LI>
<LI id=m><A title=多媒體教程 href="http://www.w3school.com.cn/m.asp">多媒體教程</A>
</LI>
<LI id=w><A title=建站手冊 href="http://www.w3school.com.cn/w.asp">建站手冊</A>
</LI></UL></DIV>
<DIV id=navsecond>
<DIV id=course>
<H2>SVG 基礎</H2>
<UL>
<LI><A title="SVG 首頁" href="http://www.w3school.com.cn/svg/index.asp">SVG
首頁</A>
<LI><A title="SVG 簡介" href="http://www.w3school.com.cn/svg/svg_intro.asp">SVG
簡介</A>
<LI><A title="SVG 實例"
href="http://www.w3school.com.cn/svg/svg_example.asp">SVG 實例</A>
<LI><A title=在HTML文檔中的SVG
href="http://www.w3school.com.cn/svg/svg_inhtml.asp">SVG in HTML</A> </LI></UL>
<H2>SVG 形狀</H2>
<UL>
<LI><A title="SVG 矩形" href="http://www.w3school.com.cn/svg/svg_rect.asp">SVG
矩形</A>
<LI><A title="SVG 圓形" href="http://www.w3school.com.cn/svg/svg_circle.asp">SVG
圓形</A>
<LI><A title="SVG 橢圓"
href="http://www.w3school.com.cn/svg/svg_ellipse.asp">SVG 橢圓</A>
<LI><A title="SVG 線條" href="http://www.w3school.com.cn/svg/svg_line.asp">SVG
線條</A>
<LI><A title="SVG 多邊形"
href="http://www.w3school.com.cn/svg/svg_polygon.asp">SVG 多邊形</A>
<LI><A title="SVG 折線"
href="http://www.w3school.com.cn/svg/svg_polyline.asp">SVG 折線</A>
<LI><A title="SVG 路徑" href="http://www.w3school.com.cn/svg/svg_path.asp">SVG
路徑</A> </LI></UL>
<H2>SVG 濾鏡</H2>
<UL>
<LI><A title="SVG 濾鏡簡介"
href="http://www.w3school.com.cn/svg/svg_filters_intro.asp">SVG 濾鏡簡介</A>
<LI><A title="SVG 高斯濾鏡"
href="http://www.w3school.com.cn/svg/svg_filters_gaussian.asp">SVG 高斯濾鏡</A>
</LI></UL>
<H2>SVG 漸變</H2>
<UL>
<LI><A title="SVG 線形漸變"
href="http://www.w3school.com.cn/svg/svg_grad_linear.asp">SVG 線形漸變</A>
<LI><A title="SVG 放射漸變"
href="http://www.w3school.com.cn/svg/svg_grad_radial.asp">SVG 放射漸變</A>
</LI></UL>
<H2>SVG 實例</H2>
<UL>
<LI><A title="SVG 實例"
href="http://www.w3school.com.cn/svg/svg_examples.asp">SVG 實例</A> </LI></UL>
<H2>SVG 參考</H2>
<UL>
<LI><A title="SVG 元素"
href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 元素</A>
</LI></UL></DIV>
<DIV id=selected>
<H2>建站手冊</H2>
<UL>
<LI><A title=網站構建 href="http://www.w3school.com.cn/site/index.asp">網站構建</A>
<LI><A title=W3C href="http://www.w3school.com.cn/w3c/index.asp">萬維網聯盟</A>
<LI><A title=瀏覽器信息
href="http://www.w3school.com.cn/browsers/index.asp">瀏覽器信息</A>
<LI><A title=網站品質 href="http://www.w3school.com.cn/quality/index.asp">網站品質</A>
<LI><A title=語義網 href="http://www.w3school.com.cn/semweb/index.asp">語義網</A>
<LI><A title=職業規劃 href="http://www.w3school.com.cn/careers/index.asp">職業規劃</A>
<LI><A title=網站主機 href="http://www.w3school.com.cn/hosting/index.asp">網站主機</A>
</LI></UL></DIV></DIV>
<DIV id=maincontent>
<H2>SVG 線形漸變</H2>
<DIV id=tpn>
<UL class=prenext>
<LI class=pre><A
href="http://www.w3school.com.cn/svg/svg_filters_gaussian.asp">Previous
Page</A> </LI>
<LI class=next><A
href="http://www.w3school.com.cn/svg/svg_grad_radial.asp">Next Page</A>
</LI></UL></DIV>
<DIV class=intro>
<P><STRONG>SVG 漸變必須在 <defs> 標簽中進行定義。</STRONG></P></DIV>
<DIV>
<H3>SVG 漸變</H3>
<P>漸變是一種從一種顏色到另一種顏色的平滑過渡。另外，可以把多個顏色的過渡應用到同一個元素上。</P>
<P>在SVG中，有兩種主要的漸變類型：</P>
<UL>
<LI>線性漸變
<LI>放射性漸變 </LI></UL></DIV>
<DIV>
<H3>線性漸變</H3>
<P><linearGradient> 可用來定義 SVG 的線性漸變。</P>
<P><linearGradient> 標簽必須嵌套在 <defs> 的內部。<defs> 標簽是 definitions
的縮寫，它可對諸如漸變之類的特殊元素進行定義。</P>
<P>線性漸變可被定義為水平、垂直或角形的漸變：</P>
<UL>
<LI>當 y1 和 y2 相等，而 x1 和 x2 不同時，可創建水平漸變
<LI>當 x1 和 x2 相等，而 y1 和 y2 不同時，可創建垂直漸變
<LI>當 x1 和 x2 不同，且 y1 和 y2 不同時，可創建角形漸變 </LI></UL>
<P>請把下面的代碼拷貝到記事本，然后把文件保存為"linear1.svg"。把此文件放入您的web目錄：</P><PRE><?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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="100%" y2="0%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg></PRE>
<H4>代碼解釋：</H4>
<UL>
<LI><linearGradient> 標簽的 id 屬性可為漸變定義一個唯一的名稱
<LI>fill:url(#orange_red) 屬性把 ellipse 元素鏈接到此漸變
<LI><linearGradient> 標簽的x1、x2、y1、y2屬性可定義漸變的開始和結束位置
<LI>漸變的顏色范圍可由兩種或多種顏色組成。每種顏色通過一個 <stop> 標簽來規定。offset 屬性用來定義漸變的開始和結束位置。
</LI></UL>
<P><A href="http://www.w3school.com.cn/svg/linear1.svg">查看例子 （水平漸變）</A></P>
<H4>另一個例子：</H4><PRE><?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>
<linearGradient id="orange_red" x1="0%" y1="0%" x2="0%" y2="100%">
<stop offset="0%" style="stop-color:rgb(255,255,0);
stop-opacity:1"/>
<stop offset="100%" style="stop-color:rgb(255,0,0);
stop-opacity:1"/>
</linearGradient>
</defs>
<ellipse cx="200" cy="190" rx="85" ry="55"
style="fill:url(#orange_red)"/>
</svg></PRE>
<P><A href="http://www.w3school.com.cn/svg/linear3.svg">查看例子
（垂直漸變）</A></P></DIV>
<DIV id=bpn>
<UL class=prenext>
<LI class=pre><A
href="http://www.w3school.com.cn/svg/svg_filters_gaussian.asp">Previous
Page</A> </LI>
<LI class=next><A
href="http://www.w3school.com.cn/svg/svg_grad_radial.asp">Next Page</A>
</LI></UL></DIV></DIV>
<DIV id=sidebar>
<DIV id=searchui>
<FORM id=searchform action=http://www.google.com/search method=get>
<P><LABEL for=searched_content>Search:</LABEL></P>
<P><INPUT type=hidden value=www.w3school.com.cn name=sitesearch></P>
<P><INPUT class=box id=searched_content title=在此輸入搜索內容。 name=as_q> <INPUT class=button title=搜索！ type=submit value=Go> </P></FORM></DIV>
<DIV id=tools>
<H5 id=tools_reference><A
href="http://www.w3school.com.cn/svg/svg_reference.asp">SVG 參考手冊</A></H5>
<H5 id=tools_example><A
href="http://www.w3school.com.cn/example/svge_examples.asp">SVG
實例</A></H5></DIV>
<DIV id=books></DIV></DIV>
<DIV id=footer>
<P>W3School提供的內容僅用于培訓。我們不保證內容的正確性。通過使用本站內容隨之而來的風險與本站無關。當使用本站時，代表您已接受了本站的使用條款和隱私條款。</P>
<P>版權所有，保留一切權利。未經書面許可，不得轉載。W3School(s)簡體中文版授權上海蒙信網絡科技有限公司在中華人民共和國運營。</P></DIV></DIV></BODY></HTML>
?? 快捷鍵說明
復制代碼
Ctrl + C
搜索代碼
Ctrl + F
全屏模式
F11
切換主題
Ctrl + Shift + D
顯示快捷鍵
?
增大字號
Ctrl + =
減小字號
Ctrl + -