javascript linear gradient one_javascript skills javascript linear gradient by Situ Zhengmei svg by Situ Zhengmei svg by Situ Zhengmei svg by Situ Zhengmei javascript linear gradient by Situ Zhengmei javascript linear gradient by Situ Zhengmei

Javascript’s ability to process images is actually not weak, but it’s a pity that the browser war has affected it. Not to mention, Adobe’s acquisition of Macromedia has put SVG in a state of slowdown.

As a new force, Apple brings us the canvas tag. Canvas was first introduced in Dashboard in Mac OS This is not the only good thing Apple has done. It believed that SVG was too cumbersome, so it made all filter tags in SVG CSS attributes (SVG has more filters than IE filters, and its functions are more comprehensive). When Firefox saw something was wrong, it quickly created a set of private properties of its own, but the prefix was changed from -webkit- to -moz-. Opera's response was relatively sluggish. It should be said that he was very dissatisfied privately, because Opera's CTO is Hakon Wium Lie, the inventor of CSS, and he doesn't like others doing anything to his own stuff. Therefore, it is very difficult for me to implement linear gradients. IE needs to use IE filters. Firefox has some problems in dynamically creating SVG. It needs to use its -moz-prefixed CSS private properties. Safari and Chrome need to use -webkit-prefixed CSS private properties. Attributes, opera needs to use SVG. Now let’s break through one by one.

IE needs to use the DXImageTransform.Microsoft.Gradient filter (it doesn’t matter if the first letter of the last Gradient is uppercase or lowercase).

属性	说明
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整体颜色值，没有默认值

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Then let’s talk about the implementation of SVG linear gradient, because the relevant CSS private properties are derived from this. Since there is no space to support uploading SVG, I can only dynamically generate SVG. For me, the best thing is to be able to implement it dynamically. At least it can reduce the number of requests and write fewer greater-than signs and less-than signs... The following is a static implementation. As for how to add html, just google it.

linearGradient has several attributes such as x1, x2, y1, y2, etc., which can help us achieve horizontal or vertical gradients. We can think of x1, x2, y2, y2 as the coordinates of the two points of the color gradient.

When y1 is equal to y2 and x1 is not equal to x2, a horizontal gradient is achieved.
When x1 is equal to x2 and y1 is not equal to y2, vertical gradient is achieved.
When y1 is not equal to y2 and x1 is not equal to x2, the angle gradient is achieved.

Copy code The code is as follows:

< ;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
javascript linear gradient (Level) by Situ Zhengmei

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Dynamic implementation, but it misfires in Firefox. It can be seen that Firefox also works on SVG Slow down.

Copy code The code is as follows:

< ;!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
xmlns="http://www.w3.org/2000/svg">
javascript linear gradient (vertical) by Situ Zhengmei

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Copy code The code is as follows:

xmlns="http://www.w3.org/2000 /svg" version="1.1">
javascript linear gradient (angle) by Situ Zhengmei

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Let’s talk about -moz-linear-gradient, Firefox’s CSS private property, which belongs to background-image, but it is also abbreviated as background. The syntax is:
-moz-linear-gradient( , [, ]* )
We can set the value of these two points to determine whether they are horizontal or vertical , such as
/*horizontal*/
-moz-linear-gradient(left, right [, ]* )1.
/*vertical*/
-moz-linear- gradient(top, bottom [, ]* )
As for the following part, it is enough to look at the running box below. However, this requires the latest version of firefox (3.6a1) to see the effect.

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Then let’s take a look at the -webkit-gradient CSS property. The usage is similar to -moz-linear-gradient, but there are three differences. The first parameter is used to determine whether it is a linear gradient or a radial gradient. Just write linear here. The two point values ​​must be left, right, top and bottom, and no matter how they are combined, the angle gradient cannot be achieved. Third, the offset of color-stop must be a decimal.

[Ctrl A to select all Note: If you need to introduce external Js, you need to refresh to execute]

Conclusion, this is the result of the coexistence of multiple browsers For a harmonious situation, I would rather IE achieve a complete monopoly. The next part is the beginning of the journey. To deal with the problem of filter failure in IE, we need to use the ancient artifact table. SVG, as you can see in the transport box above, I also made a small tool to create these special objects...