Question 44517 in Html Question posted in
Some basic documentation can be found here.

Render cursor underneath SVG – Html

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?

Tags:

2

Answers


  1. 0

    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>
    Login or Signup to reply.
  2. 0

    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)
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search