首頁 > 開發者 > JavaScript
javascript在處理映像的能力其實是不弱的，可惜瀏覽器大戰連累了它，這還不算，Adobe 收購Macromedia更讓SVG處於怠工狀態。作為新力軍，蘋果為我們帶來了canvas標籤。canvas首次在Mac OS X中的Dashboard中被引入，之後又被蘋果公司的Safari瀏覽器所支援，緊接著就成為HTML5的標準，被IE核心以外的標準瀏覽器所支援。蘋果做的好事還不止這一樁，它認為SVG太笨重了，於是它把SVG裡的濾鏡標籤統統CSS屬性化（SVG的濾鏡比IE濾鏡還多呢，而且功能更全面）。firefox一看不對勁，連忙自己也搞一套私人屬性，只不過是首碼由-webkit-改為-moz-罷了。opera的反應比較獃滯，應該說私底下非常不滿，因為opera的CTO就是CSS的發明者Hakon Wium Lie，不喜歡別人對自己的東西啥搞。因此我實現線性漸層就困難重重了，IE需要用IE濾鏡，firefox在動態建立SVG存在一些問題，需要用其-moz-首碼的CSS私人屬性，safari與chrome需要用-webkit-首碼的CSS私人屬性，opera需要用SVG。現在一個個突破吧。
IE要用到DXImageTransform.Microsoft.Gradient濾鏡（最後那個Gradient的首字母大寫小寫無所謂）。
| 屬性 | 說明 |
|---|---|
| enabled | 是否啟用濾鏡，預設為true |
| gradientType | 是垂直漸層還是水平漸層，預設是0(垂直漸層)，1為水平漸層 |
| startColorStr | 起始顏色，能接受一個8位hex顏色值，從#FF000000到#FFFFFFFF，預設是藍色#FF0000F；或者使用red,green等顏色值F |
| endColorStr | 結束顏色，能接受一個8位hex顏色值，從#FF000000到#FFFFFFFF，預設是黑色#FF000000 |
| startColor | 作用同startColorStr，接受一個0到4294967295整體顏色值，沒有預設值 |
| endColor | 作用同endColorStr，接受一個0到4294967295整體顏色值，沒有預設值 |
更詳細的內容可點擊這裡
<br /><!doctype html><br /><title>javascript線性漸層 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript線性漸層 by 司徒正美" /><br /><meta name="description" content="javascript線性漸層 by 司徒正美" /><br /><style type="text/css"><br /> #gradient{<br /> height:120px;<br /> color:navy;<br /> filter:progid:DXImageTransform.Microsoft.gradient(enabled='false',gradientType=1,startColorstr=#ffff0000, endColorstr=#00ffffff);<br /> }<br /></style></p><p><script type="text/javascript"><br /> window.onload = function(){<br /> var div = document.getElementById("gradient"),<br /> button = document.getElementById("toggle"),<br /> filter = div.filters[0];<br /> //因為它只應用到一個濾鏡。由此也可見，filters是作為元素對象的一個屬性而存在，<br /> //此屬性是一個集合，裡面是靜態CSS定義過的濾鏡與動態添加過的濾鏡。<br /> //如果不止一個濾鏡，我就要使用如下方式取得相應的濾鏡對象<br /> //filter = div.filters["DXImageTransform.Microsoft.Gradient"]<br /> filter = div.filters.item("DXImageTransform.Microsoft.Gradient")<br /> button.onclick = function(){<br /> if(filter.enabled){<br /> filter.enabled = "false";<br /> div.style.color = "navy";<br /> button.innerHTML = "啟用濾鏡";<br /> }else{<br /> filter.enabled = "true";<br /> div.style.color = "#000";<br /> button.innerHTML = "禁用濾鏡";<br /> }<br /> }<br /> }<br /></script><br /><div id="gradient">javascript線性漸層 by 司徒正美</div><br /><button type="button" id="toggle">啟用IE濾鏡</button><br />
運行代碼
接著講述一下SVG線性漸層的實現，因為相關的CSS私人屬性都衍生於此。由於沒有什麼空間支援上傳SVG，我只能動態產生SVG了。對我來說，能動態實現最好不過了，起碼能減少請求數，少寫許多大於符號小於符號……下面是靜態實現，至於怎樣加入html自己google吧。
linearGradient 有x1,x2,y1,y2等幾個屬性，可以協助我們實現水平漸層或垂直漸層。我們大可以把x1,x2,y2,y2當成色彩坡形體的兩個點的座標就是。
<?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="800px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>javascript線性漸層（水平） by 司徒正美</desc> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="100%" y2="0%"> <stop offset="20%" stop-color="rgb(255,255,0)" stop-opacity="1"/> <stop offset="80%" stop-color="rgb(255,0,0)" stop-opacity="1"/> </linearGradient> </defs> <ellipse cx="200" cy="190" rx="85" ry="55" fill="url(#gradient)"/></svg>
<br /><!doctype html><br /><title>svg by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript動態建立SVG" /><br /><meta name="description" content="javascript動態建立SVG" /><br /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"><br /><script type="text/javascript"></p><p> (function(){<br /> if(!window.svg){<br /> window.svg = {};<br /> }<br /> var svg = window.svg = {<br /> create : function(name){<br /> this.node = document.createElementNS("http://www.w3.org/2000/svg", name);<br /> return this;<br /> },<br /> appendTo: function(parent){<br /> if(typeof this.node !== "undefined" && parent.nodeType == 1){<br /> parent.appendChild(this.node);<br /> }<br /> return this;<br /> },<br /> attr : function(bag){<br /> for(var i in bag){<br /> if(bag.hasOwnProperty(i)){<br /> this.node.setAttributeNS(null,i,bag[i])<br /> }<br /> }<br /> return this;<br /> },<br /> html : function(text){<br /> if(text.nodeType == 3){<br /> this.node.appendChild(document.createTextNode(text));<br /> }<br /> return this;<br /> }<br /> }<br /> })()<br /> window.onload = function(){<br /> var root = svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;<br /> svg.create("desc").html("javascript線性漸層 by 司徒正美").appendTo(root);<br /> var defs = svg.create("defs").appendTo(root).node;<br /> //定義線性漸層<br /> var linearGradient = svg.create("linearGradient").attr({id:"gradient",x1:"0%", y1:"0%",x2:"100%",y2:"0%"}).appendTo(defs).node;<br /> svg.create("stop").attr({offset:"20%","stop-color":"red"}).appendTo(linearGradient)<br /> svg.create("stop").attr({offset:"80%","stop-color":"yellow"}).appendTo(linearGradient)<br /> svg.create("ellipse").attr({cx:"200",cy:"190",rx:"85", ry:"55",fill:"url(#gradient)" }).appendTo(root)<br /> }<br /></script><br /><h3>javascript線性漸層（水平） by 司徒正美</h3><br />
運行代碼
動態實現，不過在Firefox中啞火了，可見Firefox在SVG上也怠工了。
<?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="800px" height="400px" version="1.1" xmlns="http://www.w3.org/2000/svg"> <desc>javascript線性漸層（垂直） by 司徒正美</desc> <defs> <linearGradient id="gradient" x1="0%" y1="0%" x2="0%" y2="100%"> <stop offset="0%" stop-color="#008000" stop-opacity="1"/> <stop offset="80%" stop-color="#a9ea00" stop-opacity="0"/> </linearGradient> </defs> <polygon id = "s1" points = "60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60" fill="url(#gradient)"/></svg>
<br /><!doctype html><br /><title>svg by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript動態建立SVG" /><br /><meta name="description" content="javascript動態建立SVG" /><br /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"><br /><script type="text/javascript"><br /> (function(){<br /> if(!window.svg){<br /> window.svg = {};<br /> }<br /> var svg = window.svg = {<br /> create : function(name){<br /> this.node = document.createElementNS("http://www.w3.org/2000/svg", name);<br /> return this;<br /> },<br /> appendTo: function(parent){<br /> if(typeof this.node !== "undefined" && parent.nodeType == 1){<br /> parent.appendChild(this.node);<br /> }<br /> return this;<br /> },<br /> attr : function(bag){<br /> for(var i in bag){<br /> if(bag.hasOwnProperty(i)){<br /> this.node.setAttributeNS(null,i,bag[i])<br /> }<br /> }<br /> return this;<br /> },<br /> html : function(text){<br /> if(text.nodeType == 3){<br /> this.node.appendChild(document.createTextNode(text));<br /> }<br /> return this;<br /> }<br /> }<br /> })()<br /> window.onload = function(){<br /> var root = svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;<br /> svg.create("desc").html("javascript線性漸層 by 司徒正美").appendTo(root);<br /> var defs = svg.create("defs").appendTo(root).node;<br /> //定義線性漸層<br /> var linearGradient = svg.create("linearGradient").attr({id:"gradient",x1:"0%", y1:"0%",x2:"0%",y2:"100%"}).appendTo(defs).node;<br /> svg.create("stop").attr({offset:"0%","stop-color":"#008000"}).appendTo(linearGradient)<br /> svg.create("stop").attr({offset:"80%","stop-color":"#a9ea00"}).appendTo(linearGradient)<br /> svg.create("polygon").attr({points:"60,0 120,0 180,60 180,120 120,180 60,180 0,120 0,60",fill:"url(#gradient)"}).appendTo(root)</p><p> }<br /></script><br /><h3>javascript線性漸層(垂直) by 司徒正美</h3><br />
運行代碼
<?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="800px" height="400px" xmlns="http://www.w3.org/2000/svg" version="1.1"> <desc>javascript線性漸層(角度) by 司徒正美</desc> <defs> <linearGradient id="content" x1="0%" y1="0%" x2="100%" y2="100%"> <stop stop-color="black" offset="0%"/> <stop stop-color="teal" offset="50%"/> <stop stop-color="white" offset="100%"/> </linearGradient> </defs> <rect x="10px" y="10px" width="350" height="350" fill="url(#content)"/></svg>
<br /><!doctype html><br /><title>svg by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript動態建立SVG" /><br /><meta name="description" content="javascript動態建立SVG" /><br /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"><br /><script type="text/javascript"><br /> (function(){<br /> if(!window.svg){<br /> window.svg={};<br /> }<br /> var svg=window.svg={<br /> create : function(name){<br /> this.node=document.createElementNS("http://www.w3.org/2000/svg", name);<br /> return this;<br /> },<br /> appendTo: function(parent){<br /> if(typeof this.node !== "undefined" && parent.nodeType == 1){<br /> parent.appendChild(this.node);<br /> }<br /> return this;<br /> },<br /> attr : function(bag){<br /> for(var i in bag){<br /> if(bag.hasOwnProperty(i)){<br /> this.node.setAttributeNS(null,i,bag[i])<br /> }<br /> }<br /> return this;<br /> },<br /> html : function(text){<br /> if(text.nodeType == 3){<br /> this.node.appendChild(document.createTextNode(text));<br /> }<br /> return this;<br /> }<br /> }<br /> })()<br /> window.onload=function(){<br /> var root= svg.create("svg").attr({width:"800px",height:"400px"}).appendTo(document.body).node;<br /> svg.create("desc").html("javascript線性漸層 by 司徒正美").appendTo(root);<br /> var defs= svg.create("defs").appendTo(root).node;<br /> //定義線性漸層<br /> var linearGradient= svg.create("linearGradient").attr({id:"centent",x1:"0%", y1:"0%",x2:"100%",y2:"100%"}).appendTo(defs).node;<br /> svg.create("stop").attr({offset:"0%","stop-color":"black"}).appendTo(linearGradient)<br /> svg.create("stop").attr({offset:"50%","stop-color":"teal"}).appendTo(linearGradient)<br /> svg.create("stop").attr({offset:"100%","stop-color":"white"}).appendTo(linearGradient)<br /> svg.create("rect").attr({x:"10px",y:"10px",width:"300px",height:"300px",fill:"url(#centent)"}).appendTo(root);<br /> }<br /></script><br /><h3>javascript線性漸層(角度) by 司徒正美</h3><br />
運行代碼
接著說說-moz-linear-gradient，Firefox的CSS私人屬性，隸屬於background-image，不過它也略寫成background。文法為：
-moz-linear-gradient( , [, ]* )
我們可以設定這兩個點的值坪決定其是水平還是垂直，如
/*水平*/-moz-linear-gradient(left, right [, ]* )
/*垂直*/-moz-linear-gradient(top, bottom [, ]* )
至於後面的部分，看看下面的運行框就足夠了。不過這要用最新版的firefox(3.6a1)才能見效果。
<br /><!doctype html><br /><title>javascript線性漸層 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript線性漸層 by 司徒正美" /><br /><meta name="description" content="javascript線性漸層 by 司徒正美" /><br /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"><br /><style type="text/css"><br /> .vertical {<br /> background-image: -moz-linear-gradient(top, bottom,<br /> from(red),/*起始顏色*/<br /> color-stop(16%, orange),/*到高的16%的位置時漸層為橙色*/<br /> color-stop(32%, yellow),/*到高的32%的位置時漸層為黃色*/<br /> color-stop(48%, green),/*到高的48%的位置時漸層為綠色*/<br /> color-stop(64%, blue),/*到高的64%的位置時漸層為藍色*/<br /> color-stop(80%, indigo),/*到高的80%的位置時漸層為紫藍色*/<br /> to(violet));/*結束顏色*/<br /> height:100px;<br /> }<br /> .horizontal {<br /> background-image: -moz-linear-gradient(left, right,<br /> from(red),/*起始顏色*/<br /> color-stop(16%, orange),/*到高的16%的位置時漸層為橙色*/<br /> color-stop(32%, yellow),/*到高的32%的位置時漸層為黃色*/<br /> color-stop(48%, green),/*到高的48%的位置時漸層為綠色*/<br /> color-stop(64%, blue),/*到高的64%的位置時漸層為藍色*/<br /> color-stop(80%, indigo),/*到高的80%的位置時漸層為紫藍色*/<br /> to(violet));/*結束顏色*/<br /> height:100px;<br /> }<br /> .angular {<br /> background-image: -moz-linear-gradient(0px 0px, 100px 100px,<br /> from(red),/*起始顏色*/<br /> color-stop(16%, orange),/*到高的16%的位置時漸層為橙色*/<br /> color-stop(32%, yellow),/*到高的32%的位置時漸層為黃色*/<br /> color-stop(48%, green),/*到高的48%的位置時漸層為綠色*/<br /> color-stop(64%, blue),/*到高的64%的位置時漸層為藍色*/<br /> color-stop(80%, indigo),/*到高的80%的位置時漸層為紫藍色*/<br /> to(violet));/*結束顏色*/<br /> height:100px;<br /> }<br /></style><br /><h3 class="vertical ">記得要用最新版本的firefox運行。</h3><br /><div class="horizontal">上面是垂直漸層，這裡是水平漸層。</div><br /><div class="angular">角度漸層</div><br />
運行代碼
更詳細的資料可見這裡。
接著下來看看-webkit-gradient這個CSS屬性，用法來-moz-linear-gradient差不多，但有三點不同。第一個參數用來決定是線性漸層與放射性漸層，這裡寫linear就可以了。兩個點值，一定要為left,right,top與bottom的兩個，而且怎樣組合也實現不了角度漸層。三是color-stop的位移量一定為小數。
<br /><!doctype html><br /><title>javascript線性漸層 by 司徒正美</title><br /><meta charset="utf-8"/><br /><meta name="keywords" content="javascript線性漸層 by 司徒正美" /><br /><meta name="description" content="javascript線性漸層 by 司徒正美" /><br /><base href="http://images.cnblogs.com/cnblogs_com/rubylouvre/199042/"><br /><style type="text/css"><br /> .vertical {<br /> background: -webkit-gradient(linear, left top, left bottom, color-stop(0.0, yellow),<br /> color-stop(0.5, orange), color-stop(1.0, red)) no-repeat;<br /> height:100px;<br /> }<br /> .horizontal {<br /> background: -webkit-gradient(linear, left top, right top, from(yellow),<br /> color-stop(16%, orange),/*到高的16%的位置時漸層為橙色*/<br /> color-stop(32%, pink),/*到高的32%的位置時漸層為粉色*/<br /> color-stop(48%, green),/*到高的48%的位置時漸層為綠色*/<br /> color-stop(64%, blue),/*到高的64%的位置時漸層為藍色*/<br /> color-stop(80%, indigo),/*到高的80%的位置時漸層為紫藍色*/<br /> to(red)) no-repeat;<br /> height:100px;<br /> }</p><p></style><br /><h3 class="vertical ">必須在safari與chrome才能運行。</h3><br /><div class="horizontal">上面是垂直漸層，這裡是水平漸層。我們可以用from與top減少首尾兩個color-stop。</div><br />
運行代碼
結語，這就是多種瀏覽器共存的帶來的和諧局面，我寧願IE實現完全壟斷了。下一部分才是征途的開始，光IE處理濾鏡失效的問題，就要動用table這個上古神器了。SVG，在上面的運框中，你們看到了，我還特意搞了一個小工具來建立這些特殊的對象……
http://fener2011.blog.163.com/blog/static/164964168201054113257548/
http://css-tricks.com/css3-gradients/
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
