Search Locate Previous Next Contents

ch.DefineEffect – set up SVG effects

Effects are a general mechanism for attaching various SVG capabilities to plotted data or text such as headings and labels. Examples would include 3D ‘extrusion’ on lines or pie sectors, drop-shadows on text items, or simple animations such as growing bars or slide-in notes.

Working with filters
The SVG specification requires all filters (shadows, 3D effects) to be defined in a separate ‘definitions’ block in the file, and referenced from the object with an internal URL. This means that setting these up is a 3-stage process. Firstly, you must call ch.Include to make sure the actual filter definition forms part of the completed graphic. A typical filter would be saved in a text file and might look like:

  <desc>A simple blurred shadow for a heading</desc>
    <filter id="MyShadow">
      <feGaussianBlur in="SourceAlpha" stdDeviation="12" result="blur"/>
      <feOffset in="blur" dx="24" dy="20" result="offsetBlur"/>
        <feMergeNode in="offsetBlur"/>
        <feMergeNode in="SourceGraphic"/>

The effect definition refers to the id of the filter using the normal syntax for an internal URL – the name prefixed with ‘#’ as in:

ch.DefineEffect 97 '#MyShadow'

This points to the filter with id=MyFilter in the included content. Of course, you may have several filters defined in the same included file with different ids. You may also combine filters with other supported styles, using the syntax:

ch.DefineEffect 97 'filter:url(#MyShadow);opacity:0.75'

You may need to experiment to find out just which CSS styles the Adobe SVG viewer and the Microsoft VML renderer currently support.

Defining animations
Animations are much simpler to define, as they are simply run in-line as child tags of the animated object. For example:

ch.DefineEffect 42 '<animate attributeName="width" from="0" to="&width" dur="5s" fill="freeze" />'

This could be used with a horizontal barchart to make the bars grow over a period of 5sec. Note the use of “&property” to stand as a placeholder for the ‘static’ value of the property. This is a useful shorthand, as it allows you to apply a single animation to all the bars on your barchart, and have them grow from 0 to their natural width or height.

Applying effects to chart elements
To apply any effect (or collection of effects) to text elements, simply specify the effect id(s) in the element style:

ch.Set 'Hstyle' 'effect=98'

To apply multiple effects, chain them with the ‘+’ symbol, e.g. ‘effect=98+99’. This could be used to apply successive animations, for example a note which slides in from the right, then fades out after 10sec.

To apply the effects to data elements (lines, bars and so on) you set up an effects cycle in the same way as you define the cycle of colours, linestyles and so on. The data-elements will acquire the effects from the cycle in sequence, but note that you can only apply a single effect to each element here.

See also ...
ch.Include – add arbitrary content (SVG filters)
Effect – apply an SVG effect

Continue to: ch.DefineFont – define new TrueType fonts
© Copyright Causeway Graphical Systems Ltd 2003