HTML5 SVG 2D entry 5-Color Representation and definition

Comments: SVG and canvas are the same. They all use the Color Representation Method in standard HTML/CSS. These colors can be used for fill and stroke attributes, next, we will introduce the representation and definition of colors. If you are interested, you may find it helpful.

SVG is the same as canvas, and uses the Color Representation in standard HTML/CSS. These colors can be used for fill and stroke attributes.
There are basically the following ways to define colors::
1. color name: use the color name red, blue, black...
2. rgba/rgb values: for example, # ff0000, rgba (255,100,100, 0.5 ).
3. hexadecimal value: Use hexadecimal to specify the color, for example, # ffffff.
4. gradient value: This is the same as that in canvas. Two gradient colors are supported: linear gradient and ring gradient. As shown in:

5. Pattern fill: Use a custom pattern as the fill color.

The first two colors are very simple. Focus on the next two fill colors.

Linear Gradient
Linear gradient can be defined using the linearGradient element, and each gradient component is defined using the stop element. See the following example:

The Code is as follows:
<Svg width = "120" height = "240">
<Defs>
<LinearGradient id = "Gradient1">
<Stop class = "stop1" offset = "0%"/>
<Stop class = "stop2" offset = "50%"/>
<Stop class = "stop3" offset = "100%"/>
</LinearGradient>
<LinearGradient id = "Gradient2" x1 = "0" x2 = "0" y1 = "0" y2 = "1">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "50%" stop-color = "black" stop-opacity = "0"/>
<Stop offset = "100%" stop-color = "blue"/>
</LinearGradient>
<Style type = "text/css"> <! [CDATA [
# Rect1 {fill: url (# Gradient1 );}
. Stop1 {stop-color: red ;}
. Stop2 {stop-color: black; stop-opacity: 0 ;}
. Stop3 {stop-color: blue ;}
]>
</Style>
</Defs>

<Rect id = "rect1" x = "10" y = "10" rx = "15" ry = "15" width = "100" height = "100"/>
<Rect x = "10" y = "120" rx = "15" ry = "15" width = "100" height = "100" fill = "url (# Gradient2) "/>
</Svg>

In this example, we need to note that:
1. the gradient element must be placed in the defs element;
2. You need to set the id value for the gradient element. Otherwise, other elements cannot use this gradient.
3. the gradient member uses the stop definition, and its attributes can also be defined using CSS. It supports the attributes supported by standard HTML such as class and id.Other common attributes are as follows::
OffsetAttribute: This defines the color range of the member. The value ranges from 0% to 100% (or 0 to 1). Generally, the first color is set to 0%, the last setting is 100%.
Stop-colorAttribute: This is simple and defines the color of the member color.
Stop-opacityAttribute: defines the transparency of the member color.
X1, y1, x2, y2Attribute: the two points define the gradient direction. If not written by default, the gradient is horizontal. In the preceding example, a vertical gradient is also created.
4. Use gradient. As shown in the example, you can directly assign a value to fill or stroke in the form of url (# id.
5. Reuse of gradient members: You can also use xlink: href to reference the defined gradient members. Therefore, the above example can be rewritten as follows:

The Code is as follows:
<LinearGradient id = "Gradient1">
<Stop class = "stop1" offset = "0%"/>
<Stop class = "stop2" offset = "50%"/>
<Stop class = "stop3" offset = "100%"/>
</LinearGradient>
<LinearGradient id = "Gradient2" x1 = "0" x2 = "0" y1 = "0" y2 = "1" xlink: href = "# Gradient1"/>

Ring gradient
Use the radialGradient element to define the ring gradient or use stop to define the member color. Example:

The Code is as follows:
<Svg width = "120" height = "240">
<Defs>
<RadialGradient id = "Gradient3">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "100%" stop-color = "blue"/>
</RadialGradient>
<RadialGradient id = "Gradient4" cx = "0.25" cy = "0.25" r = "0.25">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "100%" stop-color = "blue"/>
</RadialGradient>
</Defs>

<Rect x = "10" y = "10" rx = "15" ry = "15" width = "100" height = "100" fill = "url (# Gradient3) "/>
<Rect x = "10" y = "120" rx = "15" ry = "15" width = "100" height = "100" fill = "url (# Gradient4) "/>
</Svg>

As shown in the preceding example, except the element name and some special members, all others are the same as linear gradient, including the definition of stop, which must be placed in defs, And the id must be set for it, use url (# id) to assign values. These special members are as follows:
OffsetAttribute: This is the same as the linear gradient value, but it has different meanings. In the ring gradient, 0% represents the center of the circle. This is easy to understand.
Cx, cy, rAttribute: in fact, it is also easy to understand. The ring gradient, of course, defines the center and radius of the ring. You can understand the size and position of the circle in the above example.
Fx, fyAttribute: defines the position of the color center (Focus), that is, the coordinates of the highest color gradient. In the preceding example, the center of the red color is the center of the red color, which is the default effect. If you want to change it, you can set the fx and fy coordinates.
But pay attention to the values of cx, cy, r, fx, and fy above. You will find that they are decimal. What is the unit?
You need to first understand another related attribute:GradientUnitsIt defines the coordinate units used to define the gradient. This property has two available values: userSpaceOnUse and objectBoundingBox.

ObjectBoundingBoxIt is the default value, and the coordinates used are relative to the object box (square box, not square box is more complex, skipped), the value range is 0 to 1. For example, the coordinate value of cx and cy in the preceding example (0.25, 0.25 ). This means that the center of the circle is 1/4 in the upper left corner of the box, and the radius 0.25 means that the radius length is 1/4 of the length of the square box of the object, as you can see in the figure.
UserSpaceOnUseIt indicates that the absolute coordinates are used. When using this setting, you must ensure that the gradient and filled object are kept in one position.
Let's look at the following example. Note that the default value of the gradientUnits attribute is objectBoundingBox:

The Code is as follows:
<Svg width = "120" height = "120">
<Defs>
<RadialGradient id = "Gradient5"
Cx = "0.5" cy = "0.5" r = "0.5" fx = "0.25" fy = "0.25">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "100%" stop-color = "blue"/>
</RadialGradient>
</Defs>

<Rect x = "10" y = "10" rx = "15" ry = "15" width = "100" height = "100"
Fill = "url (# Gradient5)" stroke = "black" stroke-width = "2"/>
<Circle cx = "60" cy = "60" r = "50" fill = "transparent" stroke = "white" stroke-width = "2"/>
<Circle cx = "35" cy = "35" r = "2" fill = "white" stroke = "white"/>
<Circle cx = "60" cy = "60" r = "2" fill = "white" stroke = "white"/>
<Text x = "38" y = "40" fill = "white" font-family = "sans-serif" font-size = "10pt"> (fx, fy) </text>
<Text x = "63" y = "63" fill = "white" font-family = "sans-serif" font-size = "10pt"> (cx, cy) </text>
</Svg>

You can see the meaning of "Focus.

In addition, there are some changing attributes of gradient elements, suchGradientTransformThis is not the focus here, and will be summarized and transformed later.
Another attribute that may be used isSpreadMethodThis attribute defines the behavior that should be taken when the gradient reaches its end. This property has three optional values: pad (default), reflect, and repeat. Not to mention pad, it is a natural transition. After the gradient ends, the remaining parts of the object are rendered directly using the last member color. Refect will let the gradient continue, but the gradient will continue rendering in reverse order, starting from the last color to the first color in this order of rendering; wait until the end of the gradient again, then reverse order, in this way, the Guidance object is filled. Repeat will also make the gradient continue rendering, but it will not reverse order, or re-rendering from the first color to the last color. As follows:

Look at the code for repeated rendering:

The Code is as follows:
<Svg width = "220" height = "220">
<Defs>
<RadialGradient id = "Gradient"
Cx = "0.5" cy = "0.5" r = "0.25" fx = ". 25" fy = ". 25"
SpreadMethod = "repeat">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "100%" stop-color = "blue"/>
</RadialGradient>
</Defs>
<Rect x = "50" y = "50" rx = "15" ry = "15" width = "100" height = "100"
Fill = "url (# Gradient)"/>
</Svg>

Texture Filling
Texture filling is also a popular filling method. In SVG, you can use pattern to create a texture and then use this pattern to fill other objects. Let's look at the example:

The Code is as follows:
<Svg width = "200" height = "200">
<Defs>
<LinearGradient id = "Gradient6">
<Stop offset = "0%" stop-color = "white"/>
<Stop offset = "100%" stop-color = "blue"/>
</LinearGradient>
<LinearGradient id = "Gradient7" x1 = "0" x2 = "0" y1 = "0" y2 = "1">
<Stop offset = "0%" stop-color = "red"/>
<Stop offset = "100%" stop-color = "orange"/>
</LinearGradient>
</Defs>
<Defs>
<Pattern id = "Pattern" x = ". 05" y = ". 05" width = ". 25" height = ". 25">
<Rect x = "0" y = "0" width = "50" height = "50" fill = "skyblue"/>
<Rect x = "0" y = "0" width = "25" height = "25" fill = "url (# Gradient7)"/>
<Circle cx = "25" cy = "25" r = "20" fill = "url (# Gradient6)" fill-opacity = "0.5"/>
</Pattern>
</Defs>

<Rect fill = "url (# Pattern)" stroke = "black" x = "0" y = "0" width = "200" height = "200"/>
</Svg>

The example looks simple. Create a pattern from gradient and then use pattern.

Fill the rectangle. Note:
1. Different browsers fill in the pattern with different effects.

For example, in FireFix and Chrome, the effect is the same. But if you change the color gradient

And pattern are defined in the same defs combination, FireFox can still be rendered normally,

However, Chrome will not recognize the gradient, but will only fill it with the default black.
2. You also need to define the id for pattern.
3. pattern must also be defined in defs.
4. When using pattern, the url (# id) is directly assigned to fill or stroke.

The above are all very simple. Let's take a look at the coordinate representation in the example. The coordinates are complicated in pattern.
Pattern contains two related attributes: patternUnits and patternContentUnits. The two attributes have only two values: objectBoundingBox and userSpaceOnUse. What is confusing here is that the default values of these two attributes are different, but when you understand the reason for doing so, you will find that doing so really makes sense.
1.PatternUnitsAttribute
This attribute is the same as gradientUnits of Gradient. objectBoundingBox is used by default. The attributes affected by this attribute include x, y, width, and height, which define the start point and width and height of pattern respectively. They all use relative values. In this example, we want to fill them four times in both the horizontal and vertical directions, so the width and height are set to 0.25.
2.PatternContentUnitsAttribute
The default value of this attribute is the opposite. userSpaceOnUse is used. This attribute describes the coordinate system of the Shape drawn in pattern (such as the preceding rect and circle. That is to say, by default, the shape you draw in pattern is different from the size/position of pattern. In the preceding example, we want to fill a rectangle of 200*200 and repeat each direction four times. This means that each pattern is 50*50, so the two rectangles and a circle in pattern are drawn in the 50*50 rectangle. In this way, we can understand the coordinates of the rectangle and circle in the pattern above. In addition, the pattern in this example is centered and needs to be rendered after 10 PX offset. This value is restricted by the patternUnits attribute. Therefore, by default, the values of x and y are: 10/200 = 0.05.
So why do we need to set the default values of the two attributes in pattern?

This is determined by the user's usage (discussed in the above example ):
First pattern: I think this is the most common case, so it is treated as the default value: pattern is stretched as the external image scales, no matter how big the peripheral square is, pattern is always filled four times in both directions. However, the images contained in pattern do not stretch with the scaled square filled outside. Although far-fetched, let's take a look.
Pattern 2: The shape in pattern also scales with the peripheral shape. We can set the value of the patternContentUnits attribute to objectBoundingBox to achieve this effect. For example, modify the part of pattern as follows:

The Code is as follows:
<Pattern id = "Pattern" width = ". 25" height = ". 25" patternContentUnits = "objectBoundingBox">
<Rect x = "0" y = "0" width = ". 25" height = ". 25" fill = "skyblue"/>
<Rect x = "0" y = "0" width = ". 125" height = ". 125" fill = "url (# Gradient2)"/>
<Circle cx = ". 125" cy = ". 125" r = ". 1" fill = "url (# Gradient1)" fill-opacity = "0.5"/>
</Pattern>

After modification, when the size of the filled rectangle is changed, the shape in pattern is also stretched. After modification, it is changed to the coordinates of the peripheral object. Therefore, the x and y coordinates of pattern are no longer required. pattern is always adjusted to fit the filled shape.
Pattern 3: The shape and size of pattern are fixed. No matter how the peripheral object scales, you can change the coordinate system to userSpaceOnUse to achieve this effect. The Code is as follows:

The Code is as follows:
<Pattern id = "Pattern" x = "10" y = "10" width = "50" height = "50" patternUnits = "userSpaceOnUse">
<Rect x = "0" y = "0" width = "50" height = "50" fill = "skyblue"/>
<Rect x = "0" y = "0" width = "25" height = "25" fill = "url (# Gradient2)"/>
<Circle cx = "25" cy = "25" r = "20" fill = "url (# Gradient1)" fill-opacity = "0.5"/>
</Pattern>

Figure 3 shows the typical pattern:

 

Practical reference:

Official documents: http://www.w3.org/TR/SVG11/
Script Index: http://msdn.microsoft.com/zh-cn/library/ff971910 (v = vs.85). aspx
Development Center: https://developer.mozilla.org/en/SVG
Hot reference: http://www.chinasvg.com/