| home / experts / xml / column49 |
|
|
|
SVG offers a number of pre-defined filters that modify the elements that they are applied to. In order to produce a shadow two filters can be combined: blur and offset:
<filter id="shadow"> <feGaussianBlur in="SourceAlpha" stdDeviation="2" result="blur"/> <feOffset in="blur" dx="0" dy="0" result="OffsetBlurredAlpha"/> </filter>
This newly defined shadow filter can now be applied to any SVG element, such as our blue bar:
<rect x="5" y="5" width="100" height="200" fill="blue" style="filter:url(#shadow)"/> <rect x="0" y="0" width="100" height="200" fill="blue"/>
The order is important so that the shadow ends up behind the actual bar for our first chart in 3D.
Let's conclude with a small animation of our bars. The animation consists of two parts, changing both size and position of the objects. This is necessary because in order to grow the bars from bottom to top, they need to move up and expand at the same time so that the bottom line stays constant.
<rect x="10" y="10" width="100" height="200" fill="blue"> <animate attributeName="y" values="210;10" dur="3s" repeatcount="1"/> <animate attributeName="height" values="0;200" dur="3s" repeatcount="1"/> </rect>
This example builds up a bar from a height of zero to 200 pixels,
starting at y=210 and moving up to y=10. dur denotes
the duration of the animation, milliseconds are also possible for
faster action. repeatCount is the
number of repetitions.
Putting it all together, here is our animated 3D bar graph. Wow! Once all browsers support SVG we can forget about stretching one-pixel images into shape in HTML...
Produced by Michael Claßen
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | Shopping | E-mail Offers | Freelance Jobs 
URL: http://www.webreference.com/xml/column49/2.html
Created: Feb 04, 2002
Revised: Feb 04, 2002
