Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the expression and definition of colors in HTML5 SVG, which may not be well understood by many people. in order to make you understand better, the editor has summarized the following contents for you. I hope you can get something according to this article.

SVG is the same as in canvas, using the standard color representation in HTML/CSS, which can be used for the fill and stroke properties.

There are basically the following ways to define colors:

1. Color name: use the color name red, blue, black... directly

2. Rgba/rgb value: this is also easy to understand, for example, # ff0000,rgba (255pr 100pl 100pr 0.5).

3. Hexadecimal value: a color defined in hexadecimal, for example, # ffffff.

4. Gradient value: this is also the same as in canvas, which supports two kinds of gradient: linear gradient and circular gradient. As shown in the following figure:

5. Hatch: uses a custom pattern as the fill color.

The first few are very simple, focus on the latter two filler colors.

Linear gradient

Linear gradients can be defined using the linearGradient element, and each gradient component is defined using the stop element. Look at the following example:

The code is as follows:

In this example, we need to note:

1. The gradient element must be placed in the defs element

two。 You need to set the id value for the gradient element, otherwise, other elements cannot use this gradient.

3. The members of the gradient are defined using stop, and its properties can also be defined using CSS; it supports class,id, which is supported by standard HTML. Other common properties are as follows:

Offset attribute: this defines the scope of the member color, with values ranging from 0% to 100% (or 0 to 1); usually the first color is set to 0%, and the last is set to 100%.

The stop-color attribute: this is simple enough to define the color of the member color.

Stop-opacity attribute: defines the transparency of the member color.

These two points define the direction of the gradient. If it is not written by default, it is a horizontal gradient. In the above example, a vertical gradient is also created.

4. The use of gradients, as shown in the example, can be directly assigned to fill or stroke in the form of url (# id).

5. Reuse of gradient members: you can also use xlink:href to refer to defined gradient members, so the above example can also be rewritten as follows:

The code is as follows:

Circular gradient

Use radialGradient elements to define circular gradients or stop to define member colors. Look at the example:

The code is as follows:

As you can see from the above example, except for the element name and some special members, everything else is the same as a linear gradient, including the definition of stop, which must be placed in defs, id must be set to it, and url (# id) must be used to assign values. These special members are as follows:

Offset attribute: this is the same as the value of a linear gradient, but with a different meaning. In a circular gradient, 0% represents the center of the circle, which is easy to understand.

Cx,cy,r attribute: in fact, it is also easy to understand, circular gradient, of course, to define the center and radius of the ring, experience the size and position of the circle in the above example can understand.

Fx,fy attribute: defines the location of the color center (focus), that is, the coordinates where the gradient is thickest. In the above example, the reddest red is the center of the circle, which is the default effect; if you want to change it, you can set the fx,fy coordinate value.

However, you need to pay attention to the above cx,cy,r,fx,fy values, you will find that they are all decimals, so what is the unit?

This requires understanding another related attribute: gradientUnits, which defines the coordinate units used to define gradients. This property has two available values: userSpaceOnUse and objectBoundingBox.

ObjectBoundingBox is the default value, which uses coordinates relative to the bounding box of the object (square bounding box, not square bounding box is more complex, skip), the value range is 0 to 1. For example, the coordinate value of cx,cy in the above example (0.25). It means that the center of the circle is at 1x4 in the upper left corner of the bounding box, and the radius 0.25 means that the radius is the length of the square bounding box, as you can see in the picture.

UserSpaceOnUse indicates that absolute coordinates are used, and when using this setting, you must make sure that the gradient and filled objects are kept in the same position.

Looking at the following example, notice that the default value of the gradientUnits property is objectBoundingBox:

The code is as follows:

(fx,fy)

(cx,cy)

You can see the meaning of "focus" by looking at the effect picture.

In addition, there are gradient elements and some transformation attributes, such as gradientTransform, which is not the focus here, and the transformation will be summarized later.

Another attribute that might be used is the spreadMethod property, which defines the behavior that the gradient should take when it reaches its end. This property has three optional values: pad (default) and reflect,repeat. Needless to say, pad is a natural transition, and after the gradient ends, the last member color is used to render the rest of the object directly. Refect will let the gradient continue, but the gradient will continue to render in reverse, from the last color to the first color, and then reverse the order when it reaches the end of the gradient again, thus guiding the object to be filled. Repeat also allows gradients to continue to render, but not in reverse order, from the first color to the last color over and over again. The effect image is as follows:

Look at a repeatedly rendered code:

The code is as follows:

Texture filling

Texture filling is also a popular way of filling. In SVG, you can use pattern to create a texture, and then use this pattern to fill other objects. Look directly at the example:

The code is as follows:

The example looks simple: create a pattern from a gradient and then use pattern

Fill the rectangle. It is important to note here:

1. Different browsers have different effects when filling this pattern.

For example, the example works the same in FireFix and Chrome. But if you change color gradually,

If the definition of pattern and FireFox are in the same defs combination, then FireFox can still render normally.

But Chrome does not recognize gradients and only fills them with the default black.

2. Pattern also needs to define id.

3. Pattern must also be defined in defs.

4. The use of pattern also assigns url (# id) directly to fill or stroke.

All of the above are very simple. Let's focus on the coordinate representation in the example, which is more complex in pattern.

Pattern contains two related attributes: the patternUnits attribute and the patternContentUnits attribute; the values of both attributes are still only two: objectBoundingBox and userSpaceOnUse, the meaning of which is discussed above. What's easy to confuse here is that the default values of the two properties are different, but when you understand why you're doing this, you'll find that it makes sense.

1. PatternUnits attribute

This property is the same as the gradientUnits property of Gradient, which defaults to objectBoundingBox. The attributes affected by this attribute are xrem y department width height, which define the starting point, width and height of the pattern, respectively. They both use relative values, and in the example you want to fill it four times both horizontally and vertically, so both width and height are set to 0.25.

2. PatternContentUnits attribute

The default value for this property is just the opposite, using userSpaceOnUse. This property describes the coordinate system of shapes drawn in pattern, such as rect,circle above. That is, by default, the shape you draw in pattern uses a different coordinate system than the size / position of the pattern itself. Considering the case in the above example, we want to fill a rectangle of 200mm 200 and repeat it 4 times in each direction. This means that each pattern is 50-50, so the two rectangles and a circle in the pattern are drawn in the 50-50 rectangle. So we can understand the coordinates of the rectangle and circle in the pattern above. In addition, in order to center the pattern in this example, you need to offset the 10px and start rendering, and this value is restricted by the patternUnits property, so by default, the x, y value is: 10pm 200000.05.

So why does pattern set the default values for the two properties in this way?

This is determined by the user's use (discussed with the example above):

The first pattern style: I think this is most cases, so it is treated as the default: pattern is stretched as the outer graph zooms, and pattern is always filled four times in both directions, no matter how big the outer square is. However, the graphics included in pattern are not stretched as the outer filled square is scaled. Although it is far-fetched, but let's understand it this way.

The second pattern style: shapes in pattern are also stretched with the shape scaling of the periphery. We can display to set the value of the patternContentUnits property to objectBoundingBox to achieve this effect. For example, modify the part of pattern as follows:

The code is as follows:

After modification, the shape in pattern is also stretched when you change the size of the filled rectangle. And after modification, it is changed to the coordinates relative to the peripheral object, so the x and y coordinates of pattern are no longer needed, and pattern will always adjust to fit the filled shape.

The third style of pattern: the shape and size of pattern are fixed, no matter how the peripheral objects are scaled, you can change the coordinate system to userSpaceOnUse to achieve this effect. The code is as follows:

The code is as follows:

The typical pattern in these 3 is shown in the following figure:

After reading the above, do you have any further understanding of the representation and definition of colors in HTML5 SVG? If you want to know more knowledge or related content, please follow the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.