1

I would like to overlay an SVG overtop an entire webpage, cursor included. Is there any way to change the z order of a browser's cursor so that it renders underneath a semi-transparent SVG?

Grant Moore
  • 153
  • 1
  • 10
  • 1
    This might answer your question: https://stackoverflow.com/questions/16326482/is-it-possible-to-give-the-cursor-z-index – iorgv Mar 04 '23 at 18:06
  • 1
    I don't think you can layer anything in front of the cursor. You can hide the cursor completely with CSS `pointer: none`, or you can also use a custom, partially transparent cursor as discussed here [https://stackoverflow.com/questions/23265689/change-cursor-opacity-with-css](https://stackoverflow.com/questions/23265689/change-cursor-opacity-with-css) – Jake Mar 04 '23 at 18:21
  • Note that if you do use `cursor: none;` and then use your own SVG (or HTML) element _within_ the document as a replacement cursor, then when the user moves their mouse the replacement cursor will visibly lag by _at least_ 2-3 frames on most systems; 1 frame of lag is from the browser document render, then another frame for the DWM/compositor copy - at 60Hz that's a 33ms lag which will be noticable to users with desktop mice and will make precision mouse movements uncomfortably difficult. For this reason I recommend to never try making an in-DOM cursor. – Dai Mar 06 '23 at 00:58

2 Answers2

1

No. You cannot change the z-index of the normal pointer. But you could:

When you show the overlay SVG:

  1. Hide the cursor (cursor: none)
  2. Track the pointer with a mousemove ebent handler
  3. Render a fake pointer in your overlay SVG. Make sure it is at the back (of your overlay SVG).
  4. Make sure your overlay SVG is set to pointer-events: none so that it does not block clicks on the content underneath

When/if you hide the overlay:

  1. Cancel the event handler
  2. Hide the fake pointer
  3. Restore the pointer (cursor: auto)
Paul LeBeau
  • 97,474
  • 9
  • 154
  • 181
-1

Can't you use SVG in a cursor:url( ... )

<style>
.container {
    width: 100vw;
    height: 20vh;
    background: gold;
    cursor: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 512 512'><g transform='rotate(45 256 256)'><rect id='r' x='16' y='216' width='480' height='80' rx='14'/><use href='%23r' transform='rotate(90 256 256)'/></g></svg>") 16 16, pointer;
}</style>

<div class="container"></div>
Danny '365CSI' Engelman
  • 16,526
  • 2
  • 32
  • 49
  • 1
    Using `cursor: url(...)` replaces the OS/hardware-rendered cursor image on most computers - which is always rendered _top-most_ (as it's effectively a hardware-sprite and rendered on scanout, just like in old 2D games consoles), whereas the OP wants DOM elements to overlay the cursor, which is not possible with an OS/hardware cursor (and doing that also necessarily introduces lag). – Dai Mar 06 '23 at 01:02