| home / authoring / languages / svg / intro |   
[previous] [next] |
|
|
While on the subject of opacity, we can globally define the opacity value for the whole
element by using opacity:0.5. The difference here is that the whole element inherits the
opacity value, while in the fill-opacity value only the fill is made transparent. Here
is some code to demonstrate the concept:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<rect x="0" y="0" width="189" height="152"
style="fill:olive; stroke:purple; stroke-width:5;
fill-opacity:0.1; opacity:0.5" />
</svg>View example 4 in a new window.
We can also specify the opacity level of a stroke by using stroke-opacity:0.8.
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<rect x="0" y="0" width="189" height="152"
style="fill:olive; stroke:purple; stroke-width:5;
fill-opacity:0.1; stroke-opacity:0.8" />
</svg>View example 5 in a new window.
The opacity property demonstrates a very important facet of SVG, which often is not
immediately noticed. It is not only the element itself that can be altered, but its sub-components as
well - which makes them ideally suited to dynamic manipulation. Another way of thinking about this is
by comparing it to Flash. In Flash you have the ability to alter a symbol's transparency and color values,
but in order to achieve the same effect in Flash, each of a rectangle's strokes must be converted to
symbols as well as the fill itself, thereby increasing the file size of the movie. In SVG the same
effect is achieved with minimal code and consequently does not greatly impact the file size.
Rounded Rectangle Corners
The <rect> shape also brings with it the ability to have rounded
corners by using the rx and ry properties. The r in front of
the x and y literally denotes radius and allows us to define the shape of
the rounded corners. For example:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="300" height="300">
<rect x="0" y="0" rx="20" ry="20"
width="289" height="252"
style="fill:olive; stroke:purple; stroke-width:5"/>
</svg>View example 6 in a new window.
produces a rectangle with rounded corners. Decrease the value of rx and
ry and the corners are not as marked, increase it and corners appear more rounded.
<line />The SVG <line> element defines a straight line by defining the
starting (x1, y1) and ending points (x2, y2) of a line. Let's look at a
simple example to familiarize ourselves:
1. <?xml version="1.0" standalone="no"?>
2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
3. <svg width="300" height="300">
4. <line x1="127" y1="65" x2="127" y2="200"
style="stroke:rgb(0,0,0);stroke-width:2"/>
5. </svg>View example 7 in a new window.
Once again Line 4 contains the code that creates an SVG line. The starting point from
the top of a browser is defined by the x1="127" property and the starting point from left is defined
with the y1="65" property. Our ending point for the top position is defined with the x2="127"
property and the left position ending point is defined with the y2="200" property. Playing with these
values produces different line orientations.
As is the case with the <rect> element, CSS properties can also be
utilized with the line element. In this example, like our earlier <rect> example,
an rgb color is defined, as well as the weight of the line via the stroke-width property.
Very thin lines can be produced by specifying a value that is below 1 and above 0, for example,
stroke-width:0.5. Other CSS properties such as opacity can also be used to
alter the appearance of a line.
| home / authoring / languages / svg / intro |
[previous] [next] |
Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
Created: November 21, 2001
Revised: November 21, 2001
URL: http://webreference.com/authoring/languages/svg/intro/4.html
