Is it possible to apply cursor style when mouseover <svg><use> tag ?

[Wojciech Makowiecki]

Hi,

I'm using MathJax library with SVG output.

When moving mouse above the equation, I would like to keep the cursor style in "move".

The problem: 

When moving mouse above "svg" tag content - exactly inside "use" tag (black equation symbols) the cursor style changes into pointer.

All css styles are set to "cursor: move;" including the part of svg inside "use" tag.

Live example is at http://EquationMap.com, just zoom-in a bit with scroll 

and move mouse over any equation, to notice that the cursor changes between move and pointer each time you enter and leave any of the tags.

Is it possible to change it so the cursor would stay in "move" style ?

Best,

Wojciech

[Peter Krautzberger]

Hi,

I'm assuming http://stackoverflow.com/questions/21368897/is-it-possible-to-apply-cursor-style-when-mouseover-svguse-tag is yours as well -- it would be good to leave a comment here about such double posts.

You need to add your styling via the SVG output configuration -- see http://docs.mathjax.org/en/latest/options/SVG.html (under "styles")

    "SVG": {

        styles: {

            ".MathJax_SVG": {

                cursor: "move",

            }

should do the trick.

Peter.

--
You received this message because you are subscribed to the Google Groups "MathJax Users" group.
To unsubscribe from this group and stop receiving emails from it, send an email to mathjax-user...@googlegroups.com.
For more options, visit https://groups.google.com/groups/opt_out.

[Wojciech Makowiecki]

Hi Peter,

Thank you very much for your reply!

Yes, the other stackoverflow thread is mine, sorry, for not pasting the link.

I tried your solution, but unfortunately it doesn't work.

When I inspect the elements in the equation all of them (<span>, <svg>, <g>, <use>) 

get "cursor: move" which should be fine but it doesn't work.

I also set the same thing before manually (by styling elements) 

including putting in the css:  use {cursor: move} or adding the style directly in the element in the dev tools

but none of this worked.

I'm guessing here, but maybe it is because there is the href attribute in the <use> tag?

The browser may be interpreting it as something you can click on and that could change the css.

I may also be the problem of treating SVG as DOM while it is not fully supported by browsers.

To bypass this, I can think of just one solution:

Is there a way that I could use mathjax to output complete inline svg without <use> tags ?

(I created my own function that combines all the glyphs together, 

but it would be much, much simpler and with much better performance if MathJax could do this)

Best,

Wojciech

--
You received this message because you are subscribed to a topic in the Google Groups "MathJax Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/mathjax-users/jKmqJJdbqTg/unsubscribe.
To unsubscribe from this group and all its topics, send an email to mathjax-user...@googlegroups.com.

[Peter Krautzberger]

Hi,

For an example see http://jsbin.com/kami/2/ -- this works.

Other CSS on your page is interfering with MathJax's styling, overriding the cursor style for the paths. You'll have to track down what interferes here.

The use tags are not the actual problem (although their style is being overriden); they are integral to the way the SVG output works and we don't plan to change that behavior.

Peter.

[Wojciech Makowiecki]

Hi,

This is great Peter!!! Thanks a lot!

Now I know it's doable it should be easy to track it down :)

One more follow up question to finish the thread:
now that we have "cursor: move", what would be the best way 

of changing it back to "cursor: pointer" ?

Many thanks!

Wojciech

[Peter Krautzberger]

Hi,

I'm not sure what you're after. Could you explain when and how you want to change it?

Peter.

[Wojciech Makowiecki]

Hi Peter,

I just need to be able to change the cursor above the equation on demand,

so I'd need to write 2 functions that I could call when I need them.

1st:  change_the_cursor_above_eqs_to_move(), 

2nd: change_the_cursor_above_eqs_to_pointer();

Most of the time I'd like to have the cursor above the equation set to "move",

but e.g. when someone clicks on the equation I'd like to change the cursor above it to "pointer",

until it's unclicked, then I'll change it back to "move".

I might change this somewhat, but I will still need the ability to change between cursors.

Many thanks,

Wojciech

[Peter Krautzberger]

Hi Wojciech,

The styles in the MathJax configuration can't be updated (since MathJax only compiles stylesheets from it once), so you need to take care of this some other way. This is not strictly a MathJax problem anymore and you'll have to figure out what works for you.

One idea might be to create a style for a class that will be used for the selected math (pointer), say .selected, and then use

styles: {

  ".MathJax_SVG": {cursor: "move"},

  ".MathJax_SVG.selected": {cursor: "pointer"}

}

and then add the "selected" class to the .MathJax_SVG element when it is selected.  Depending on how you are detecting the clicks, it might be easier to add "selected" to the class of some higher up element (where the detection occurs).  In that case, use

styles: {

  ".MathJax_SVG": {cursor: "move"},

  ".selected .MathJax_SVG": {cursor: "pointer"}

}

(Watch out for the lack of space in ".MathJax_SVG.selected" and the space in ".selected .MathJax_SVG".)

You might want to search a broader forum like stackoverflow for more ideas.

Peter.

[Wojciech Makowiecki]

Hi Peter,

Thank you very much again!

Everything is clear now.

Best,

Wojciech