HTML and CSS Reference
In-Depth Information
You can easily modify the settings for the X and Y axes to
change the position of your line. In the following SVG code, the
line is changed to run vertically.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<line x1=”300” y1=”310” x2=”300” y2=”10”
style=”stroke:red;stroke-width:10”/>
</svg>
Figure 3.8 shows the results and how the line is displayed.
The POLYLINE element extends the functionality of the
LINE element to enable you to build drawings created with
lines. The construction is created through valued pairs of X and
Y coordinates using POLYLINE's point attribute. Here is an
example of creating a square shape using the POLYLINE element.
<?xml version=”1.0” standalone=”no”?>
<!DOCTYPE svg PUBLIC “-//W3C//DTD SVG 1.1//EN”
“http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd”>
<svg width=”100%” height=”100%” version=”1.1”
xmlns=”http://www.w3.org/2000/svg”>
<polyline points=”5,5 5,150 150,150 150,5 5,5”
style=”fill:white;stroke:red;stroke-width:2”/>
</svg>
Figure 3.8 Changing the XML element values changes the display of the line.
Search WWH ::




Custom Search