As the new force, Apple brought us a canvas tag. Canvas was first introduced in Mac OS X's dashboard and then supported by Apple's Safari browser, followed by the HTML5 standard, supported by standard browsers outside the IE kernel. Apple has done more than this, it thinks SVG is too cumbersome, so it put the filter label in the SVG all CSS attribute (more SVG filters than IE filters, and more full-featured). Firefox look wrong, hurriedly oneself also get a set of private property, but is the prefix from-webkit-to-moz-Bale. Opera's reaction is rather sluggish, it should be said privately very dissatisfied, because opera CTO is the inventor of the CSS Hakon Wium Lie, do not like others to their own things. So I realize linear gradient is difficult, ie need to use IE filters, Firefox in the dynamic creation of SVG problems, need to use its-moz-prefix CSS private properties, Safari and chrome need to use the-webkit-prefix CSS private properties, Opera needs to use SVG. Now let's break through.
IE to use the DXImageTransform.Microsoft.Gradient filter (the last gradient of the first letter uppercase lowercase does not matter).
| Property |
description |
| enabled |
Whether to enable filters, default to True |
| gradienttype |
is a vertical or horizontal gradient, the default is 0 (vertical gradient), 1 is a horizontal gradient |
| startcolorstr |
start color, can accept a 8-bit hex color value, from #ff000000 to #ffffffff, the default is blue #ff0000f, or use Red,green and other color values F | The
| endcolorstr |
end color, which accepts a 8-bit hex color value, from #ff000000 to #ffffffff, and the default is black #ff000000 |
tr>
| StartColor |
functions with STARTCOLORSTR, accepting a 0 to 4294967295 overall color value, no default |
endcolor
| function with EndColorStr, accept a 0 to 4294967295 overall color value, no default value |
<!doctype html> <title>javascript linear gradient by Masaki </title> <meta charset= "Utf-8"/> <meta name= "K Eywords "content=" javascript linear gradient by Masaki "/> <meta name=" description "content=" JavaScript linear gradient by Masaki "/> Tyle type= "Text/css" > #gradient {height:120px; Color:navy; Filter:progid:DXImageTransform.Microsoft.gradient (enabled= ' false ', gradienttype=1,startcolorstr= #ffff0000, Endcolorstr= #00ffffff); } </style> <script type= "Text/javascript" > window.onload = function () {var div = document.getElementById (" Gradient "), Button = document.getElementById (" toggle "), filter = Div.filters[0]; Because it applies to only one filter. It is also visible that the filters exists as an attribute of the element object,//This property is a collection of static CSS-defined filters and dynamically added filters. If more than one filter, I will use the following method to obtain the appropriate filter object//filter = div.filters["DXImageTransform.Microsoft.Gradient"] filter = Div.filters.item ("DXImageTransform.Microsoft.Gradient") Button.onclick = function () {if (filter.enabled) { filter.enabled = "false"; Div.style.color = "Navy"; button. InnerHTML = "Enable Filters"; }else{filter.enabled = "true"; Div.style.color = "#000"; button.innerhtml = "Disable Filter"; }} </script> <div id= "gradient" >javascript linear gradient by Masaki </div> <button type= "button" id= "Toggle "> Enable IE Filters </button>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Next, let's talk about the implementation of the SVG linear gradient, because the related CSS private properties are derived from this. Because there is no space to support uploading SVG, I can only dynamically generate SVG. For me, dynamic implementation is the best, at least to reduce the number of requests, write less than many greater than the number is less than ... Here is the static implementation, as to how to add HTML to their own Google bar.
LinearGradient has several properties, such as X1,x2,y1,y2, that can help us achieve a horizontal or vertical gradient. We can think of X1,x2,y2,y2 as the coordinates of the two points of the color gradient body.
When y1 equals y2,x1 not equal to x2, a horizontal gradient is achieved.
When x1 equals x2,y1 not equal to Y2, a vertical gradient is implemented.
When Y1 is not equal to y2,x1 not equal to x2, an angle gradient is implemented.
Copy Code code as follows:
<?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 linear gradient (horizontal) by Masaki </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= "cy=" 190 "rx=" "ry=" ("fill=" url (#gradient) "/>"
</svg>
<!doctype html> <title>svg by Masaki </title> <meta charset= "Utf-8"/> <meta name= "keywords" co Ntent= "JavaScript dynamically create SVG"/> <meta name= description "content=" JavaScript dynamically create SVG "/> <base href=" http:// Www.jb51.net "> <script type=" text/javascript "> (function () {if (!window.svg) {window.svg = {}; var svg = Window.svg = {create:function (name) {This.node = Document.createelementns ("Http://www.w3.org/2000/svg", name); return this; }, Appendto:function (parent) {if (typeof this.node!== "undefined" && Parent.nodetype = 1) {Parent.appendchild (This.node); return to this; }, Attr:function (bag) {for (var i in bag) {if (Bag.hasownproperty (i)) {This.node.setAttributeNS (Null,i,bag[i])}} return this; }, Html:function (text) {if (Text.nodetype = 3) {This.node.appendChild (document.createTextNode (text)); return to this; }}) () Window.onload = function () {var root = svg.create ("svg"). attr ({width: "800px", HeiGht: "400px"}). Appendto (Document.body). node; Svg.create ("desc"). HTML ("JavaScript linear gradient by Masaki"). Appendto (root); var defs = svg.create ("Defs"). Appendto (root) node; Define linear gradient var lineargradient = svg.create ("LinearGradient"). attr ({id: "gradient", X1: "0%", y1: "0%", X2: "100%", y2: "0%"}) . Appendto (Defs). node; Svg.create ("Stop"). attr ({offset: "20%", "Stop-color": "Red"}). Appendto (lineargradient) svg.create ("Stop"). attr ({ Offset: "80%", "Stop-color": "Yellow"}). Appendto (lineargradient) svg.create ("Ellipse"). attr ({cx: "", Cy: "190", Rx: "Ry", "a", Fill: "URL (#gradient)"}). Appendto (Root)} </script> <p>javascript linear gradient (horizontal) by Masaki </p& Gt
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Dynamic implementation, but in the Firefox Yahuo, can be seen in the SVG Firefox is also a sabotage.
Copy Code code as follows:
<?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 linear gradient (vertical) by Masaki </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>
<!doctype html> <title>svg by Masaki </title> <meta charset= "Utf-8"/> <meta name= "keywords" co Ntent= "JavaScript dynamically create SVG"/> <meta name= description "content=" JavaScript dynamically create SVG "/> <base href=" http:// Www.jb51.net "> <script type=" text/javascript "> (function () {if (!window.svg) {window.svg = {}; var svg = Window.svg = {create:function (name) {This.node = Document.createelementns ("Http://www.w3.org/2000/svg", name); return this; }, Appendto:function (parent) {if (typeof this.node!== "undefined" && Parent.nodetype = 1) {Parent.appendchild (This.node); return to this; }, Attr:function (bag) {for (var i in bag) {if (Bag.hasownproperty (i)) {This.node.setAttributeNS (Null,i,bag[i])}} return this; }, Html:function (text) {if (Text.nodetype = 3) {This.node.appendChild (document.createTextNode (text)); return to this; }}) () Window.onload = function () {var root = svg.create ("svg"). attr ({width: "800px", HeigHT: "400px"}). Appendto (Document.body). node; Svg.create ("desc"). HTML ("JavaScript linear gradient by Masaki"). Appendto (root); var defs = svg.create ("Defs"). Appendto (root) node; Define linear gradient var lineargradient = svg.create ("LinearGradient"). attr ({id: "gradient", X1: "0%", y1: "0%", X2: "0%", y2: "100%"}) . Appendto (Defs). node; Svg.create ("Stop"). attr ({offset: "0%", "Stop-color": "#008000"}). Appendto (lineargradient) svg.create ("Stop"). attr ( {offset: "80%", "Stop-color": "#a9ea00"}). Appendto (lineargradient) 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)} </script> <p>javascript linear gradient (vertical) by Masaki </p>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Copy Code code as follows:
<?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 linear gradient (angle) by Masaki </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= "height=" "fill=" url (#content) "/>
</svg>
<!doctype html> <title>svg by Masaki </title> <meta charset= "Utf-8"/> <meta name= "keywords" co Ntent= "JavaScript dynamically create SVG"/> <meta name= description "content=" JavaScript dynamically create SVG "/> <base href=" http:// Www.jb51.net "> <script type=" text/javascript "> (function () {if (!window.svg) {window.svg={}; var svg=window.svg={create:function (name) {this.node=document.createelementns ("Http://www.w3.org/2000/svg", name ); return this; }, Appendto:function (parent) {if (typeof this.node!== "undefined" && Parent.nodetype = 1) {Parent.appendchild (This.node); return to this; }, Attr:function (bag) {for (var i in bag) {if (Bag.hasownproperty (i)) {This.node.setAttributeNS (Null,i,bag[i])}} return this; }, Html:function (text) {if (Text.nodetype = 3) {This.node.appendChild (document.createTextNode (text)); return to this; }}) () Window.onload=function () {var root= svg.create ("SVG"). attr ({width: 800px), Height: "400px"}). Appendto (Document.body). node; Svg.create ("desc"). HTML ("JavaScript linear gradient by Masaki"). Appendto (root); var defs= svg.create ("Defs"). Appendto (root) node; Defines a linear gradient var lineargradient= svg.create ("LinearGradient"). attr ({id: "centent", X1: "0%", y1: "0%", X2: "100%", y2: "100%"} ). Appendto (defs). node; Svg.create ("Stop"). attr ({offset: "0%", "Stop-color": "Black"}). Appendto (lineargradient) svg.create ("Stop"). attr ({ Offset: "50%", "Stop-color": "Teal"}). Appendto (lineargradient) svg.create ("Stop"). attr ({offset: "100%", "Stop-color" : "White"}). Appendto (lineargradient) svg.create ("rect"). attr ({x: "10px", y: "10px", Width: "300px", Height: "300px", Fill: "URL (#centent)"}). Appendto (root); } </script> <p>javascript linear gradient (angle) by Masaki </p>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Then say-moz-linear-gradient, Firefox's CSS private properties, subordinate to the background-image, but it is also slightly written background. The syntax is:
-moz-linear-gradient (<POINT>, <POINT> [, <stop>]*)
We can set the value of the two points of the ping to determine whether it is horizontal or vertical, as
/* Level * *
-moz-linear-gradient (left, right [, <stop>]*) 1.
/* Vertical */
-moz-linear-gradient (top, bottom [, <stop>]*)
As for the back section, it's enough to look at the following run box. But this will be with the latest version of Firefox (3.6A1) to see the effect.
<!doctype html> <title>javascript linear gradient by Masaki </title> <meta charset= "Utf-8"/> <meta name= "K Eywords "content=" javascript linear gradient by Masaki "/> <meta name=" description "content=" JavaScript linear gradient by Masaki "/> ASE href= "Http://www.jb51.net" > <style type= "text/css" >. Vertical {background-image:-moz-linear-gradient ( Top, bottom, from (red),///Color-stop (16%, orange),/* to high 16% position when gradient to orange/color-stop (32%, yellow),/* to High 32% In the position of the gradient is yellow/color-stop (48%, green),/* to the height of 48% when the gradient is green/color-stop (64%, blue),/* to the high 64% position when the gradient is blue/color-stop (80%, Indigo),/* to a high 80% position when the gradient is violet blue/to (violet));//end color/height:100px; }. Horizontal {background-image:-moz-linear-gradient (left, right, from (red),/* Starting color/* Color-stop (16%, orange),/* to 16 high % of the position when the gradient is orange/color-stop (32%, yellow),/* to the high 32% position when the gradient is yellow/color-stop (48%, green),/* to the high 48% position when the gradient is green/color-stop (64%, Blue),/* to a height of 64% where the gradient is blue/color-stop (80%, Indigo),/* to the height of 80% where the gradient is violet blue/to (violet));/* End color/height:100px; }. Angular {background-image:-moz-linear-gradient (0px 0px, 100px 100px, from (red),//* Starting color */color-stop (16%, orange),/ * To the high 16% position when the gradient is orange/color-stop (32%, yellow),/* to the high 32% position when the gradient is yellow/color-stop (48%, green),/* to the high 48% position when the gradient is green * * Color-stop (64%, blue),/* to a height of 64% where the gradient is blue/color-stop (80%, Indigo),/* to the height of 80% when the gradient is violet blue/to (violet));/* End color */height : 100px; } </style> <p class= "vertical" > Remember to run with the latest version of Firefox. </p> <div class= "Horizontal" > above is a vertical gradient, this is a horizontal gradient. </div> <div class= "angular" > Angle gradient </div>
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Then take a look at-webkit-gradient this CSS property, usage to-moz-linear-gradient almost, but there are three different points. The first parameter is used to determine a linear gradient with a radioactive gradient, where the write linear is OK. Two point values must be two left,right,top and bottom, and how to combine can not achieve the angle gradient. The third is that the offset of the color-stop must be a decimal number.
<!doctype html> <title>javascript linear gradient by Masaki </title> <meta charset= "Utf-8"/> <meta name= "K Eywords "content=" javascript linear gradient by Masaki "/> <meta name=" description "content=" JavaScript linear gradient by Masaki "/> ASE href= "Http://www.jb51.net" > <style type= "text/css" >. Vertical {background:-webkit-gradient (linear, left Top, left bottom, color-stop (0.0, yellow), color-stop (0.5, orange), color-stop (1.0, red)) No-repeat; height:100px; }. Horizontal {background:-webkit-gradient (linear, left top, right top, from (yellow), Color-stop (16%, Orange), * to 16 % of the position when the gradient is orange/color-stop (32%, pink),/* to the high 32% position when the gradient is pink/color-stop (48%, green),/* to the high 48% position when the gradient is green/color-stop (64%, Blue),/* to a height of 64% where the gradient is blue/color-stop (80%, Indigo),/* to the height of 80% where the gradient is violet blue/to (red)) no-repeat; height:100px; } </style> <p class= "vertical" > must be run in Safari and Chrome. </p> <div class= "Horizontal" > above is a vertical gradient, this is a horizontal gradient. We can use from and top to reduce two color-stop. </div&gT
[Ctrl + A All SELECT Note: If the need to introduce external JS need to refresh to perform]
Conclusion, this is the coexistence of a variety of browsers brought about by the harmonious situation, I would prefer IE to achieve a complete monopoly. The next part is the beginning of the journey, optical ie to deal with the problem of filter failure, it is necessary to use the table this ancient artifact. SVG, in the box above, you see, I also deliberately made a small tool to create these special objects ...
