HTML and CSS Reference
In-Depth Information
Listing 14-2:
SVG gradients
<!DOCTYPE HTML>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SVG Gradients</title>
</head>
<body>
<svg id="mysvg" xmlns="http://www.w3.org/2000/svg"
version="1.1" width="800" height="800" >
<defs>
<linearGradient id="linear-test"
x1="1" y1="0" x2="0" y2="0">
<stop offset="5%" stop-color="black" />
<stop offset="55%" stop-color="white" />
<stop offset="95%" stop-color="black" />
</linearGradient>
<radialGradient id="radial-test"
cx="0" cy="0" r="1" fx="0" fy="0">
<stop offset="5%" stop-color="black" />
<stop offset="55%" stop-color="white" />
<stop offset="95%" stop-color="black" />
</radialGradient>
</defs>
<rect x="0" y="50" width="375" height="375" fill="url(#linear-test)"
/>
<rect x="400" y="50" width="375" height="375"
fill="url(#radial-test)" />
</svg>
</body>
</html>
Both types of gradients also support a
gradientUnits
attribute, which determines what the units the
x1,y1,x2,y2
and
cx,cy,r,fx,fy
attributes use. By default the
objectBoundingBox
value is used,
which means that all values are expected to be in the range of 0 to 1. If the alternative option
user-
SpaceOnUse
is applied, the values would be set in the same range as the element on the Canvas.
SVG also supports pattern fills, which enable you to define a set of SVG elements to be used as a repeated
fill pattern. The pattern is defined by a
<pattern>
element with an
id
that can take a
width
and
height
along with a
viewBox
that works the same way as described in the
<svg>
element. Inside the
<pattern>
element, you can draw the SVG element that makes up the pattern. The fill then needs to reference the
id
in the
fill attribute the same way as with gradients. Again, an example makes this easier to understand.
Listing 14-3
shows a pattern created with a circle and a diagonal
polyline
, which when applied to an ellipse results in
what is shown in
Figure 14-3
.
