SVG - Open for Business (2/2) - exploring XML

SVG - Open for Business

Shading

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.

Animation

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...

Additional information

Produced by Michael Claßen

URL: https://www.webreference.com/xml/column49/2.html
Created: Feb 04, 2002
Revised: Feb 04, 2002

SVG - Open for Business (2/2) - exploring XML