In summary: The issue with IE8 occurs because it cannot interpret the object and instead places the image in its position. Your description of the error seems to be the opposite of what is actually happening :-)
I am certain that the behavior you are describing is quite the reverse - only in IE 8 is the cursor set to pointer
, while in my other browsers (FF, Chrome, IE 10...) the cursor defaults to default
, resembling an arrow.
My theory is that IE8 struggles to understand SVG (as versions prior to 9 do not support SVG) and therefore shows the image as part of a link - assigning it the appropriate cursor, pointer
, redundantly defined in your CSS. On the contrary, other browsers are able to interpret the object correctly and display it without applying the desired cursor, as the element type is designated as object (similar to placing a flash movie, like a YouTube video, within the a
element).
One more thing to note: using the :hover
selector is unnecessary; the cursor will only display over the element when it's directly hovered upon.
Edit:
Erik's comment provides a concise explanation (included here for quick reference):
To resolve this issue, consider placing the cursor rule inside the svg tag where the events will be directed for tags. Events will not "bubble" up to the parent document. Alternatively, you can use an iframe referencing the svg, such as: jsfiddle.net/Mw8JX