The cursor from the SVG picture is rasterized

1

Can anyone explain why I am adding a svg image for the cursor, but for some reason it looks poor-quality, what is it connected with?

2

Two factors … disable image optimization in some cases that helps. But as you have a SVG the problem is likely that it is used as an background image in Hype. You can always make it bigger (2x) and scale it down with transformation scale. Maybe also share an example.

3

cursor.hype.zip (14.7 KB)

here is the project.
Is it possible to use svg properties and add code in url?

4

Some points to consider:

  • Your project doesn’t use an SVG, it uses a GIF
  • Your cursor code isn’t correct, it needs to define a hotspot and a callback:
    element.style.cursor = "url('http://bringerp.free.fr/Files/RotMG/cursor.gif') 0 0, pointer";
  • The SVG variant can work. You can either add this as CSS (with an !important directive) or if you are going to do it the JavaScript route you just need to make sure you properly quote and escape the code… here’s an example (notice the ticks for the url are escaped to \' since the entire value uses single quotes):
    element.style.cursor = 'url(\'data:image/svg+xml;utf8,<svg fill="%23FF0000" height="100" viewBox="0 0 24 24" width="100" xmlns="http://www.w3.org/2000/svg"><path d="M0 0h24v24H0z" fill="none"/><path d="M20 11H7.83l5.59-5.59L12 4l-8 8 8 8 1.41-1.41L7.83 13H20v-2z"/></svg>\') 24 24, auto';
  • From searching around the internet, it appears that SVG cursors in all major browsers are rendered at a @1x resolution so they will not look entirely sharp on retina displays.
2 Likes
5

I found a project that allows me to realize my idea, but I faced one problem, until the cursor reaches the circle, it will not move, and I would like the circle to immediately replace the cursor, and when pressed, the cursor does not return to the place where it is located on the screen
cursor new.hypetemplate.zip (12.6 KB)

6

You are running the followMe() code only on the events for that element (mouse click, mouse over, mouse out). You probably don’t want any of those and instead should run it On Scene Load, so it will start following immediately.

To get the click animation to work correctly you can either animate the scale width/height instead of the top/left/width/height position properties, or you could have the following element be a group or symbol that contains the animating element so its position is stable.

7

yes, thanks, everything worked out, but it turned out that due to the fact that another object is attached to the arrow, guidance and pressing on other objects are not determined, can this be somehow solved?
cursor click.hypetemplate.zip (14.2 KB)

8

Use the pointer-event settings. I still don’t quite understand the goal of this.
Regards

9

If you use “Ignore all pointer events” then you will see the standard cursor. It is probably still best to use the CSS cursor property instead of this type of override. Note that you can show retina cursors in Chrome using a PNG. Maybe that’s the better route and deal with other browsers being non-retina? Or can you design a cursor that will still look good in retina?