Re: Cursor, event handling and declarative animation

Hi Jonathan.

Jonathan Chetwynd:
> Cursor, event handling and declarative animation
> Does SVG provide a (default?) means to visually identify event handlers?
> How might one achieve this with a user style sheet?

You could do something like this:

<svg xmlns="">
  <circle cx="100" cy="100" r="50" onclick="alert('hi')"/>
  <circle cx="200" cy="200" r="50"/>
  <circle cx="300" cy="300" r="50" onclick="alert('hi')"/>

and have as your user stylesheet:

  circle[onclick] {
    cursor: pointer;
    filter: url(;

where filters.svg#glow is some filter effect that makes the clickable
graphical elements distinguishable from those that aren’t.

> Most users find it helpful to know where event handlers are.
> Traditionally, the cursor changes to a hand for HTML links which  
> might also be underlined, have a border on focus etc...
> Attached two examples, try to imagine the intended interactivity, try  
> it out, the check the code...

For more complex modifications to the presentation, like your
underline/border example, XBL could be used (once it is implemented).

> Additionally when using focusin is it intended that it is sufficient  
> to identify the element as in mup.focusin or would mup need to be  
> within an anchor?

In SVG Tiny 1.2, an element needn’t be an anchor or a text element to
gain the focus.  See, which describes
how you can specify that an element can be focusable.

Cameron McCormack,  ▪  ICQ 26955922  ▪  MSN

Received on Tuesday, 27 February 2007 07:24:08 UTC