HTML5's SVG 2D Introduction 5 - Color representation and definition method

Author：Eve Cole Update Time：2025-04-11 04:00:03

SVG and canvas are the same, both use standard HTML/CSS color representation methods, and 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 value: This is also easy to understand, for example #ff0000,rgba(255,100,100,0.5).

3. Hexadecimal value: A color defined in hexadecimal, such as #ffffff.

4. Gradient value: This is also the same as in canvas, supporting two gradient colors: linear gradient and ring gradient. As shown in the figure below:

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

The first few are very simple, let’s focus on the two fill colors in the next two.

Linear Gradient

Linear Gradient can be used to define linear gradients, and each gradient color component is defined using stop element. See the following example:

<svg>

<defs>

</linearGradient>

</linearGradient>

#rect1 { fill: url(#Gradient1); }

.stop1 { stop-color: red; }

.stop2 { stop-color: black; stop-opacity: 0; }

.stop3 { stop-color: blue; }

]]>

</style>

</defs>

</svg>

In this example, we need to note :

1. Gradient color elements must be placed in the defs element;

2. You need to set the id value for the gradient element, otherwise, other elements will not be able to use this gradient.

3. The gradient color members are defined using stop, and their properties can also be defined using CSS; it supports attributes such as class and id, which are supported by standard HTML. Other common attributes are as follows :

offset attribute: This defines the range of action of the member color, and the value of this attribute is from 0% to 100% (or 0 to 1); usually the first color is set to 0%, and the last one is set to 100%.

stop-color attribute: This is very simple, defining the color of the member color.

stop-opacity property: defines the transparency of member colors.

x1,y1,x2,y2 attributes: These two points define the direction of the gradient. If you don't write it by default, it is a horizontal gradient. In the above example, a vertical gradient is also created.

4. Use gradient colors, as shown in the example, just assign the value 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:

</linearGradient>

Ring gradient

Use the radialGradient element to define the ring gradient, or use stop to define the member color. See example:

<svg>

<defs>

</radialGradient>

</radialGradient>

</defs>

</svg>

From the example above, except for the element name and some special members, everything else is the same as linear gradient, including the definition of stop, must be placed in defs, it must be set to id, use url(#id) to assign values, etc. These special members are as follows:

offset attribute: This is the same as linear gradient value, but the meaning is different. In the ring gradient, 0% represents the center of the circle, which is easy to understand.

cx,cy,r attributes: In fact, it is easy to understand. The ring is gradual. Of course, you need to define the center and radius of the ring. You can understand the size and position of the circle in the above example.

fx,fy attribute: defines the position at the center of the color (focus), that is, the coordinates at the densest place of the gradient color. In the above example, the redest reddish is the center of the circle, which is the default effect; if you want to change it, you can set the fx,fy coordinate values.

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

This requires you to first understand another related attribute: gradientUnits , which defines the coordinate units used to define gradient colors. This property has 2 available values: userSpaceOnUse and objectBoundingBox.

objectBoundingBox is the default value. The coordinates it uses are relative to the object enclosing box (the case where it is not a square enclosing box is more complicated, skip it), and the value range is 0 to 1. For example, the coordinate value of cx and cy in the above example (0.25, 0.25). It means that the center of the circle is 1/4 of the upper left corner of the enclosure box, and the radius of 0.25 means that the radius is 1/4 of the length of the object square enclosure box, as you can see in the figure.

userSpaceOnUse means that absolute coordinates are used. When using this setting, you must ensure that the gradient color and fill objects must be kept in the same position.

Look at the following example, note that the default value of the gradientUnits property is objectBoundingBox:

<svg>

<defs>

<radialGradient id="Gradient5"

cx="0.5" cy="0.5" r="0.5" fx="0.25" fy="0.25">

</radialGradient>

</defs>

<rect x="10" y="10" rx="15" ry="15"

fill="url(#Gradient5)" stroke="black" stroke-width="2"/>

</svg>

You will know the meaning of focus by looking at the renderings.

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

Another possible attribute that is used is the spreadMethod property, which defines the behavior that gradient color should take when it reaches its end point. This property has 3 optional values: pad (default), reflect, repeat. Needless to say, pad is a natural transition. After the gradient color is over, use the last member color to directly render the remaining part of the object. Refect will make the gradient color continue, but the gradient color will continue to render in reverse, starting from the last color to the first color; when the gradient color end point is reached again, reverse the order, so that the object is filled in this way. repeat will also allow the gradient color to continue rendering, but will not be reversed, and will still render from the first color to the last color over and over again. The renderings are as follows:

Look at a piece of code that renders repeatedly:

<svg>

<defs>

<radialGradient id="Gradient"

cx="0.5" cy="0.5" r="0.25" fx=".25" fy=".25"

spreadMethod="repeat">

</radialGradient>

</defs>

<rect x="50" y="50" rx="15" ry="15"

fill="url(#Gradient)"/>

</svg>

Texture fill

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. Let's take a look at the example directly:

<svg>

<defs>

</linearGradient>

</linearGradient>

</defs>

<defs>

</pattern>

</defs>

</svg>

The example looks simple, create a pattern from a gradient color and then use the pattern

Fill the rectangle. Note here:

1. The effect is different when filling this pattern in different browsers.

For example, the examples work the same in FireFix and Chrome. But if you make the gradient color

If the pattern is defined in the same defs combination, FireFox can still render normally.

However, Chrome cannot recognize the gradient color, it will only fill it with the default black.

2. Pattern also needs to define id.

3. Pattern must also be defined in defs.

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

The above are all very simple. Let’s focus on the coordinate representation in the example. The coordinates are more complicated in pattern.

The pattern contains two related properties: patternUnits and patternContentUnits attributes; both properties still have only two values: objectBoundingBox and userSpaceOnUse. The meaning of these two values has been discussed above. What is easy to confuse here is that the default values of these two properties are different, but when you understand the reasons for doing this, you will find that doing this makes sense.

1. patternUnits attribute

This property is the same as the gradientUnits property of Gradient, and the objectBoundingBox is used by default. The attributes affected by this attribute are x, y, width, and height. These four attributes define the starting point and width of the pattern respectively. They both use relative values, and in the example, they want to fill in horizontal and vertical directions 4 times, so both width and height are set to 0.25.

2. patternContentUnits property

The default value of this property is exactly the opposite, using userSpaceOnUse. This property describes the coordinate system of the shapes drawn in the pattern (such as rect, circle above). That is to say, by default, the shape you draw in the pattern uses a different coordinate system and the size/position of the pattern itself. Considering the case in the example above, we want to fill a rectangle of 200*200 and repeat each direction 4 times. This means that each pattern is 50*50, so the two rectangles and a circle inside the pattern are drawn in this 50*50 rectangle. In this way, 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, it needs to be offset by 10px before rendering. This value is restricted by the patternUnits property, so by default, the x and y values are: 10/200=0.05.

So why do pattern set the default values of the two attributes like this?

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

The first pattern style : I think this is most of the situation, so it is processed as the default value: pattern is stretched as the outer graph is scaled, and no matter how big the outer square is, the pattern will always be filled 4 times in both directions. However, the graphics contained in the pattern will not be stretched as the squares filled outside are scaled. Although it is far-fetched, just understand it.

The second pattern style : the shape in the pattern is also stretched as the shape of the outer edge is scaled. We can also set the value of the patternContentUnits property to objectBoundingBox to achieve this effect. For example, modify the pattern part as follows:

</pattern>

After modification, when changing the size of the filled rectangle, the shape in the pattern will also be stretched. And after modification, it is changed to the coordinates of the peripheral object, so the x and y coordinates of the pattern are no longer needed. The pattern will always be adjusted to suit the filled shape.

The third pattern style : the shape and size of the 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:

</pattern>

The typical patterns in these 3 are shown in the figure below:

Practical reference:

Official document: 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

Popular reference: http://www.chinasvg.com/