HTML and CSS Reference
In-Depth Information
<defs>
<radialGradient id=”yellow_red” cx=”50%” cy=”50%”
r=”50%” fx=”50%” fy=”50%”>
<stop offset=”0%” style=”stop-color:yellow;stop-
opacity:1”/>
<stop offset=”25%” style=”stop-color:red;stop-
opacity:1”/>
<stop offset=”50%” style=”stop-color:blue;stop-
opacity:1”/>
<stop offset=”100%” style=”stop-color:black;stop-
opacity:1”/>
</radialGradient>
</defs>
<rect width=”500” height=”250”
style=”fill:url(#yellow_red);
stroke:yellow”/>
<circle cx=”250” cy=”250” r=”180” stroke=”black”
stroke-width=”2” fill=”url(#yellow_red)” />
</svg>
The results are shown in Figure 3.23.
Figure 3.23
Gradient color
definitions can be shared among
shapes.
Adding Text to Your SVG Drawings
Text can be added to your SVG drawings using the TEXT
element. At its most basic, all you need to do is add the TEXT ele-
ment to your SVG document, as shown in the following code and
Figure 3.24.
<svg xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”>
<text x=”100” y=”40”>It was the best of times</
text>
</svg>
The
X
and
Y
attributes specify where on the screen the text
will appear. Formatting of the text is controlled using CSS in
the
style
attribute. Text can have the following styles applied
to it:
Figure 3.24
Text can be easily inserted into an SVG drawing use the TEXT element.
