Cursors

In SVG is het mogelijk om zelf een cursor te maken of een van de standaard cursors te gebruiken.

Standaard cursors

Let op!
Adobe SVG Viewer ondersteunt het css-element cursor en de tag <cursor /> niet. Batik SVG Viewer wel maar pas sinds batik1.5bèta5.


U kan een standaard cursor gebruiken door bij een tag het attribuut style toe te voegen en daarin het css-element cursor een van de volgende waarden te geven:

Cursor Uitleg
auto Cursor die normaal in deze omstandigheden wordt gebruikt.
crosshair Kruis.
default Standaard cursor.
pointer Handje.
move Cursor die wordt gebruikt om iets te verslepen.
e-resize Cursor om vensters groter te maken.
ne-resize Cursor om vensters groter te maken.
nw-resize Cursor om vensters groter te maken.
n-resize Cursor om vensters groter te maken.
se-resize Cursor om vensters groter te maken.
sw-resize Cursor om vensters groter te maken.
s-resize Cursor om vensters groter te maken.
w-resize Cursor om vensters groter te maken.
text Cursor om tekst te selecteren.
wait Cursor die wachten aanduid.
help Cursor voor help.
Bijvoorbeeld:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 160">
<style type="text/css">
rect {stroke: black; stroke-width: 1; stroke-dasharray: 5 2;}
</style>
<g style="cursor: auto;">
<rect x="0" y="0" width="100" height="10" fill="blue" />
<text x="10" y="10" fill="yellow">auto</text>
</g>
<g style="cursor: crosshair;">
<rect x="0" y="10" width="100" height="10" fill="blue" />
<text x="10" y="20" fill="yellow">crosshair</text>
</g>
<g style="cursor: default;">
<rect x="0" y="20" width="100" height="10" fill="blue" />
<text x="10" y="30" fill="yellow">default</text>
</g>
<g style="cursor: pointer;">
<rect x="0" y="30" width="100" height="10" fill="blue" />
<text x="10" y="40" fill="yellow">pointer</text>
</g>
<g style="cursor: move;">
<rect x="0" y="40" width="100" height="10" fill="blue" />
<<text x="10" y="50" fill="yellow">move</text>
</g>
<g style="cursor: e-resize;">
<rect x="0" y="50" width="100" height="10" fill="blue" />
<text x="10" y="60" fill="yellow">e-resize</text>
</g>
<g style="cursor: ne-resize;">
<rect x="0" y="60" width="100" height="10" fill="blue" />
<text x="10" y="70" fill="yellow">ne-resize</text>
</g>
<g style="cursor: nw-resize;">
<rect x="0" y="70" width="100" height="10" fill="blue" />
<text x="10" y="80" fill="yellow">nw-resize</text>
</g>
<g style="cursor: n-resize;">
<rect x="0" y="80" width="100" height="10" fill="blue" />
<text x="10" y="90" fill="yellow">n-resize</text>
</g>
<g style="cursor: se-resize;">
<rect x="0" y="90" width="100" height="10" fill="blue" />
<text x="10" y="100" fill="yellow">se-resize</text>
</g>
<g style="cursor: sw-resize;">
<rect x="0" y="100" width="100" height="10" fill="blue" />
<text x="10" y="110" fill="yellow">sw-resize</text>
</g>
<g style="cursor: s-resize;">
<rect x="0" y="110" width="100" height="10" fill="blue" />
<text x="10" y="120" fill="yellow">s-resize</text>
</g>
<g style="cursor: w-resize;">
<rect x="0" y="120" width="100" height="10" fill="blue" />
<text x="10" y="130" fill="yellow">w-resize</text>
</g>
<g style="cursor: text;">
<rect x="0" y="130" width="100" height="10" fill="blue" />
<text x="10" y="140" fill="yellow">text</text>
</g>
<g style="cursor: wait;">
<rect x="0" y="140" width="100" height="10" fill="blue" />
<text x="10" y="150" fill="yellow">wait</text>
</g>
<g style="cursor: help;">
<rect x="0" y="150" width="100" height="10" fill="blue" />
<text x="10" y="160" fill="yellow">help</text>
</g>
</svg>

(Bekijk dit voorbeeld).

De <cursor />-tag

Met deze tag , die u tussen <defs> en </defs> plaatst, kan u eigen cursors laden. Deze tag heeft de volgende attributen:
Attribuut Uitleg
x x-coördinaat van het punt op de cursor waarmee ergens op geklikt kan worden.
y y-coödinaat van het punt op de cursor waarmee ergens op geklikt kan worden.
xlink:href locatie van de cursor (dit moet een afbeelding zijn).
Bijvoorbeeld:

<?xml version="1.0" encoding="iso-8859-1"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="100%" height="100%" viewBox="0 0 100 160">
<defs>
<cursor id="MyCursor" xlink:href="cur.gif" x="4" y="4" />
</defs>
<circle cx="50" cy="50" r="50" style="fill: green; cursor: url(#MyCursor),default" onclick="alert('U klikte op de groene rechthoek');" />
</svg>

(Bekijk dit voorbeeld)