Change color of svg image used as cursor

Question

Is there a way to change the fill color of the path of an svg image used as a cursor (like so: cursor: url(cur/play.svg), auto; )?

I don't know the color before i hover the element so it has to be a CSS or a JS solution (i can't just make another svg in advance).

Answer 1

No that isn't possible. The CSS cursor rule loads an external resource and can't pass a parameter, nor can an SVG read the color underneath it.

Make a good cursor with a color contrasting fill and line and it should be visible everywhere.

Answer 2

If you have option to generate SVG file then it's possible.

Theme Option or something has changed color of cursor then Option will generate your assets SVG regenerate to your own color. Then if you refresh the front then cursor color will be changed.

That's the only way.