- Painting
- Working with Color
- Applying a Fill
- Applying a Stroke
- Setting Transparency
- Creating Gradients
- Creating Patterns
- Summary
- Q&A
- Workshop
This chapter is from the book
This chapter is from the book
This chapter is from the book
Setting Transparency
Changing the transparency of an object is a common need for designers. For the uninitiated, transparency in the design realm refers to how opaque an object is, or how much light is allowed to show through.
For a simple explanation, imagine a thick white sheet of paper. Undisturbed, you will not be able to see another piece of colored paper underneath. The white sheet is 100% opaque. However, if you add grease to the white sheet, you'll slowly begin to see the color underneath, albeit as a feathered, blurry image. The grease has taken away some of the opacity of the white sheet. As you add more grease to the top paper, it finally becomes completely see-through, or 0% opaque, and the paper below is completely revealed in the areas the grease has soaked.
Achieving a transparent effect in SVG also is possible by taking away the opacity of an object, but instead of grease, you use the opacity style declaration.
The syntax for transparency is opacity:1, where 1 equals 100% opaque (not see-through) and 0 equals 0% opaque (completely see-through). A value above 1 is interpreted as 1, and a value below 0 is interpreted as 0. Thus, to attain varying levels of opacity, you simply define your value as a decimal point (0.25, for instance).
In some cases, SVG takes advantage of several opacity declarations to get the job done. If you are looking to change the transparency of an entire object (both strokes and fills), the opacity declaration will do just fine. However, if you are looking to change only the opacity of the fill of an object, you would use fill-opacity, whereas a stroke is modified with stroke-opacity.
You can experiment with the results of all three of these commands by modifying the "BarStatistics" rectangle (line 26 in Listing 7.2). First, create a new style class (line 8 in Listing 7.3) to modify the fill-opacity of the object to 25% of its original value. Then, apply this class to the BarStatistics rectangle on line 29. Figure 7.4 shows the resulting appearance.
){kind=link}
Listing 7.3 Adjusting the Transparency of the Statistics Bar
01: <?xml version="1.0" standalone="no"?>
02: <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
03:
04: <svg width="500" height="300">
05:
06: <style type="text/css">
07: <![CDATA[
08: .FillOpacityPoint25{fill-opacity:0.25;}
09: .Fill333333{fill:#333333;}
10: .FillC66A10{fill:#C66A10;}
11: .Fill99CCFF{fill:#99CCFF;}
12: .FillFFFF00{fill:#FFFF00;}
13: .FillFFFFFF{fill:#FFFFFF;}
14: .FillNone{fill:none;}
17: .Stroke000000{stroke:#000000;}
18: .StrokeWidth1{stroke-width:1;}
19: ]]>
20: </style>
21:
22: <rect id="Sky" x="10" y="45" width="200" height="245" class="Fill99CCFF"/>
23:
24: <circle id="Sun" cx="105" cy="160" r="56" class="FillFFFF00"/>
25:
26: <ellipse cx="25" cy="100" rx="50" ry="25" id="Cloud1" class="FillFFFFFF"/>
27: <ellipse cx="180" cy="235" rx="50" ry="25" id="Cloud2" class="FillFFFFFF"/>
28:
29: <rect id="BarStatistics" x="10" y="245" width="200" height="45" class="Fill333333 StrokeNone
FillOpacityPoint25"/>
30:
31: <g id="GraphicFramework" class="StrokeWidth1 Stroke000000">
32: <rect id="Outline" x="10" y="10" width="480" height="280" class="FillNone"/>
33: <rect id="BarTitle" x="10" y="10" width="480" height="35" class="FillC66A10"/>
34: </g>
35:
36: </svg>
Figure 7.4 Adjusting the transparency of the statistics bar.
Observe how a transparent object's color appears to change according to how much it reveals of the object below. (In reality, the color never changes; rather, what changes is how much of that color is revealed.)