HTML and CSS Reference
In-Depth Information
Listing 14-2: SVG gradients
<html lang="en">
<meta charset="UTF-8">
<title>SVG Gradients</title>
<svg id="mysvg" xmlns=""
version="1.1" width="800" height="800" >
<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" />
<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" />
<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)" />
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 .
Search WWH ::

Custom Search