This chapter is from the book
This chapter is from the book
This chapter is from the book
Workshop
Quiz
What style properties are used to adjust the transparency of an object?
True or False: The stroke-weight style declaration is used to determine the thickness of a stroke.
Describe the two types of gradients possible in SVG.
Which element is used to repeat an object's display at a set offset within another object?
True or False: SVG can accept hexadecimal notation to describe color values.
Answers
The opacity, fill-opacity, and stroke-opacity style properties are used to adjust the transparency of an object. The first of the three, opacity, adjusts both fill and stroke opacities simultaneously.
False. The stroke-width declaration is used to determine the thickness of a stroke.
Two types of gradients exist in SVG: linear and gradient. Linear gradients follow a straight directional path (known as a gradient vector), whereas radial gradients blend colors along the radius of a circle.
The pattern element is used to create a repeatable object inside another object. When applied, it acts just like a color fill, tiling its contents across the dimensions of the object.
True. SVG can accept many methods of describing a color, including both color keywords and hexadecimal notation of RGB values.
Exercises
Flex your mastery of patterns and gradients by creating a pattern containing a series of gradated objects. Copy lines 8 and 14 through 22 of Listing 7.6 and paste the lines into their appropriate location in Listing 7.8 (line 8 belongs in the style sheet, whereas the remaining lines can replace the blue square on line 14).
Observe the interesting effects you can create by layering a series of semi-transparent objects over each other. Make sure each object has a different fill and that none of the objects share the same coordinates and dimensions.
Apply transparency to a gradient. Place the gradient over an object with a pattern fill, and adjust this object's transparency as well.