0

I want to use a custom cursor in my SVG file. The cursor is defined in the same SVG file as the rest of my document:

<defs>
  <g id="cursor-symbol">
     <circle fill-opacity="0.8" fill="white" r="10.0" cx="10.0" cy="10.0" stroke="black" stroke-width="2.0" stroke-opacity="1"/>
     <line y2="20.0" x1="10.0" x2="0.0" transform="rotate(45.0, 10.0, 10.0)" y1="10.0"/>
  </g>
</defs>

Then I tried to use that cursor, but can't find out how to reference it:

<rect cursor="url(#cursor-symbol)" x="0" y="0" width="100" height="100" />

The attribute value seems to be invalid.

I also created a cursor element and tried with that:

<defs>
  <g id="cursor-symbol">
    <circle fill-opacity="0.8" fill="white" r="10.0" cx="10.0" cy="10.0" stroke="black" stroke-width="2.0" stroke-opacity="1"/>
    <line y2="20.0" x1="10.0" x2="0.0" transform="rotate(45.0, 10.0, 10.0)" y1="10.0"/>
  </g>
  <cursor id="cursor" xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#cursor-symbol"/>
</defs>
...
<rect cursor="url(#cursor)" x="0" y="0" width="100" height="100" />

but to no avail.

How to I reference such a cursor that is defined in the same document?

radlan
  • 2,393
  • 4
  • 33
  • 53
  • Maybe take a look at http://stackoverflow.com/questions/27218922/javascript-selecting-a-custom-cursor-svg – Ian Jan 07 '16 at 12:25
  • @Ian That doesn't help me. I still do not know how to reference the cursor from the same document. Do you mean the "inline svg" answer? That is actually not what I expect as the best solution. – radlan Jan 07 '16 at 12:29
  • What UA are you trying this on? – Robert Longson Jan 07 '16 at 13:51
  • @RobertLongson I use batik, but also tried Opera 12.16. Opera simply doesn't display the cursor. Batik displays an error: `A malformed value was assigned to a "cursor" property.` – radlan Jan 07 '16 at 14:26
  • did you find a solution for this. I was able to get this working through css: url('data:image/svg+xml;utf8,') 24 24, auto But can't get it to refer to a svg already on the page ie (url(#)). Any ideas welcome – Ben Mar 20 '18 at 16:40

0 Answers0