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. 

Post new comment

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