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="http://www.w3.org/2000/svg">
  <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')"/>
</svg>

and have as your user stylesheet:

  circle[onclick] {
    cursor: pointer;
    filter: url(http://somewhere.else.org/filters.svg#glow);
  }

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
http://www.w3.org/TR/SVGMobile12/interact.html#focus, which describes
how you can specify that an element can be focusable.

-- 
Cameron McCormack, http://mcc.id.au/
 xmpp:heycam@jabber.org  ▪  ICQ 26955922  ▪  MSN cam@mcc.id.au

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