Implement the 'cursor' element and the 'cursor' attribute




15 years ago
4 months ago


(Reporter: chris, Unassigned)


(Depends on: 1 bug)


Firefox Tracking Flags

(Not tracked)




(5 attachments, 3 obsolete attachments)



15 years ago
Mozilla does well on the SVG cursor test. It implements all the built in cursors
from CSS2. It gails to implement the url() form, probably because in CSS2 this
was poorly specified in terms of conformance. SVG 1.0 fixes that with its cursor
element and link to a PNG file.

It would be excellent (and help both SVG 1.1 and CSS 2.1) to see the cursor
property fully implemented. This involves fetching the PNG file, reading the
hotspot coordinates from the cursor element, and creating a platform custom
cursor 9on those platforms that support it, or a black and white version on X

Comment 1

15 years ago

Comment 2

15 years ago
Created attachment 104417 [details]
SVG Basic 1.1 vwersion of cursor test 

This is the SVG 1.1 Basic version of the SVG 1.0 test case.

Comment 3

15 years ago
Created attachment 104418 [details]
custom PNG cursor for previous attachment

This is the custom cursor that the previous attachment expects to find at

Comment 4

15 years ago
This is the MSDN documentation for custom cursors. There seems to be a single
call for this:

"You can also create a custom cursor at run time by using the CreateIconIndirect
function, which creates a cursor based on the content of an ICONINFO structure.
The GetIconInfo function fills this structure with hot spot coordinates and
information concerning the associated mask and color. "

I couldn't find the API calls for MacOS or mac OS X but notice

"Cursor utilities are fully supported in Mac OS X."
which implies it is possible. Hardware cursors seem to be 16x16, software
cursors any size.

I am looking into documentation on custom cursors for X Windows but it seems to
be limited to monochrome.
Mass voting for advance in CSS cursor implementation...
After several tests I found that cursor "url()" property is completely broken in
Mozilla 1.2.1: it is NOT ignored (as it should be before it is implemented), it
is rather interpreted as "text" instead, or at least it looks like that: a
standard I-bar:


This makes it completely impossible to render URL-defined cursors for elements
other than text - e. g., for hyperlinks. Though I once succeeded in writing
webpage both MSIE and Mozilla compatible, I had to use dirty MSIE trick @import,
placing cursor URL into CSS file which was imported by that non-standard directive.

As Jakob Nielsen once wrote in his "Designing Web Usability: The Practice of
Simplicity" (, marking external hyperlinks
(from one site to another) should mean not only placing dedicated small icons
nearby, but also changing or altering hovering cursor color and/or shape as well
- which is simple and won't need screen space, as icons do. (I can't give the
exact quote here, because I only read Russian translation of the book.) That's
why the "cursor: url();" feature has potentially extreme importance for the Web,
and bugs accompanying its implementation in Mozilla are so annoying.

Cursor: url() was implemented in Microsoft Internet Explorer since version 6.
I feel someone (e.g. reporter) should change bug severity to "major". Existance
of such a bug may indicate serious problem in Mozilla CSS implementation: the
browser should ignore the url(), if it cannot render it. Any unintellegible CSS
properties should be ignored. If some are not, there's an inner bug in Mozilla
CSS parser. Am I right about that?
This is a general style system bug, not confined to SVG.  It's also a dupe.
Re: comment 6, see bug 77974.

*** This bug has been marked as a duplicate of 38447 ***
Last Resolved: 15 years ago
Resolution: --- → DUPLICATE

Comment 9

15 years ago
This has substantial overlap with, but is not a duplicate of, the general 
style cursor bug. SVG also has a cursor element, which needs to be implemented 
to fully resolve this bug (though it can of course be used from non-SVG 
namespaces also as it is indirected through the style system.

Comment 10

13 years ago
This bug is not RESOLVED. 
The summary should be 'Implement svg:cursor' ? 
Created attachment 181198 [details]
testcase - cursor property set via CSS

This works in Mozilla, but not in ASV.
Attachment #104417 - Attachment is obsolete: true
Attachment #104418 - Attachment is obsolete: true
Created attachment 181199 [details]
testcase - cursor property set via the cursor attribute

This works in ASV, but not in Mozilla.
Created attachment 181202 [details]
testcase - cursor property set via both

This works in Mozilla, but not in ASV. I was hoping this would work around our
lack of support for the cursor element and attribute, and enable custom cursors
to work in both Mozilla and ASV. Unfortunately, it doesn't work. ASV6 preview
release overrides the cursor attribute in the markup with the CSS, so things
fail since it only allows custom cursors to be set via a reference to a cursor
element. Not by direct reference to the image that the cursor element
Created attachment 181204 [details]
testcase - cursor property set via CSS that references the cursor element and the image

This works in both Mozilla and ASV. If CSS is used to reference the cursor
element and reference the image directly, things work nicely. Note that the
cursor element has to be referenced before the image, or ASV doesn't like it.
Reopening. As noted in comment 9 and comment 10, there is still work to do here.

For the record, ASV3 doesn't support custom cursors at all.
Resolution: DUPLICATE → ---
Summary: cursor property url() not working → Implement the 'cursor' element and the 'cursor' attribute


13 years ago
Assignee: alex → general
Ever confirmed: true
Any updates with regard to cursor="" attribute support in Gecko 1.9?
It will not be in 1.9. You can still get custom cursors though. See this file (and the comments in it):
Assignee: general → nobody
QA Contact: bbaetz → general

Comment 18

7 years ago
Created attachment 497292 [details]
test case - wheel

When 'two fallback' cursors are specified, only the last cursor, standard one, is used (FF4b7/Win7/64bit). Maybe I use wrong syntax, but it is Ok for Chrome.
   <cursor id="hand">
      <path ... />
   <cursor id="hand_raster" x="10" y="9" xlink:href="hand.png"/>
<g cursor="url('#hand'), url('#hand_raster'), pointer;">

Comment 19

7 years ago
Created attachment 497300 [details]
test case - wheel

There were missing resources so all the stuff is provided as the zip file now.
Attachment #497292 - Attachment is obsolete: true


7 years ago
Depends on: 619617
My current plan is to WONTFIX this bug in favor of bug 619617.
The proposal in bug 619617 seems better to me because it's much lighter-weight, since in the common case it would only requires a property to be added to the SVG fragment that's to be used as a cursor image, instead of requiring a whole intermediary <cursor> element to be created. In the case of using a raster image, it would still be possible to use an <image> tag and specify the 'hot-spot' property on that.

Comment 22

7 years ago
You can now have SVG cursors too as long as you use just CSS to specify them and avoid the cursor element. See
Keywords: dev-doc-needed

Comment 23

4 months ago
Cursor element is deprecated:
Last Resolved: 15 years ago4 months ago
Resolution: --- → WONTFIX
Keywords: dev-doc-needed
You need to log in before you can comment on or make changes to this bug.