SVG mouseover tricks

Adding mouseover effects to an SVG is a simple way to make it interactive. Previously, I decribed several techniques to create basic mouseover effects, generally turning one or two boxes partially opaque. I often find just using CSS method works fine, but sometimes more complex effects are required. Below are some of the tricks I've discovered for achieving more advanced effects.

Grouping

I often find that I want to trigger an effect on one element when the mouse moves over another. For example, I might want to highlight a line on a graph the mouse moves over its label. As I mentioned in the previous post, this could be achieved using <set> or ECMAScript, but a simpler and more reliable method is to simply group the elements and use CSS. The idea of grouping elements is prehaps too simple to be considered a trick, but I've included it here for completeness.

For example to get a box to change opacity when the mouse is moved over either it or a label we can group them like so:

<g class="hover_group">
  <text x="30" y="20">Blue box</text>
  <x="30" y="30" width="60" height="60" fill="blue"/>
</g>

And then use CSS:

<style> 
  .hover_group:hover
  {
    opacity: 0.5;
  }
</style>

CSS selectors

In the previous example, both the label and the box change opacity when the mouseover event is triggered, which is sometimes what you want. If you don't, you can prevent the text from altering, by changing the CSS to:

<style> 
  .hover_group:hover rect
  {
    opacity: 0.5;
  }
</style>

Now the text elements don't change opacity but still trigger changing the boxes' opacity.

Changing the cursor

In the previous example, when the mouse moves over the text elements it changes to a text cursor, which looks a bit strange on buttons or labels. You can change the cursor to the default arrow by adding the attribute cursor="default" to an element. Or you can use CSS again to change, for example, the behaviour of all <text> element:

text
{
  cursor: default;
}

For a list of all the different cursors see my post about SVG buttons (for which these tricks are quite useful).

Preventing mouseover events

If you move the text in the previous example down so its over the box, you have the basis for a button. However, rather than create a group, an extra CSS style, and change the cursor, it's simpler to make the text elements invisible to mouseover effects (uninteractable?). This is also very useful if you have overlapping element and want to ignore the ones on top.

In the example below, there is an ugly effect as the text on top of the boxes blocks the mouseover effect.

To get around this, we can use the following CSS to make the cursor ignore all text elements:

text
{
    pointer-events: none;
}

Continuous events on mouse hold

This isn't really a mouseover effect, rather a mousedown effect, but it's related, so I've included it here. The problem is how to continually call a function when the mouse is held down (as in this example). The answer is to have two addition functions in addition to the function you want to call (here named myFunction):

function beginFunction()
{
  myFunction();
  myTimeout = setInterval("myFunction()", 50);
}
    
function endFunction()
{
  if (typeof(myTimeout) != "undefined")
  {
    clearTimeout(myTimeout);
  }
}

Then add to the element you want to animate:

<tag onmousedown="beginFunction()"
     onmouseup="endFunction()"
     onmouseout="endFunction()" />

Now when the mouse is held down on the element, beginFunction() is called, which is turn calls myFunction(). It then uses setInterval() to repeatedly call myFunction every 50 ms. When the mouse either leaves the element or is released, then endFunction stops the repeating calls.

AttachmentSize
group_hover_css.svg686 bytes
group_hover_css2.svg691 bytes
group_hover_cursor.svg738 bytes
group_hover_hide_event.svg571 bytes
group_hover_hide_event2.svg623 bytes
growing_circle.svg1.21 KB

Comments

Very useful. These tricks helped me reduce many lines of code. Thank you!

Just wanna say this is an amazing blog...I love all the efforts you made here...It's very easy to learn and follw. And the explainations of Chinese are funny. Looking forward to seeing more. 

Very well organized and easy to follow tutorials! Practical techniques I can use in my work. Thank you!

 

In this example i couldn t understand why not have four separated paths in one SVG and just have them rotate, but then i tried it out and you can t reference inside the use element.

Thanks, your site is a great help (I'm a newbie)! One thing I keep having trouble with is distinguishing where SVG ends and where Javascript (or something else) begins. I want to start by learning what SVG can do before branching into Javascript if necessary. For instance, is your example "Continuous events on mouse hold" using "pure" SVG? The fact that it has functions in it implies Javascript to me, but that's not mentioned anywhere on this page. If you're still monitoring this site, could you tell me if it is indeed all SVG? And in any case, do you know of any sites or other references for SVG that are super clear about distinguishing it from other markup languages or code? You'd think such a thing would be easy to find, but I'm having trouble doing it. 

Post new comment

The content of this field is kept private and will not be shown publicly.