Precise SVG mouseovers in CSS and HTML - dictionary

Question

I have a geometic shape that I would like to fill in, pictured
When the mouse is hovered over each area, I would like it to fill in, pictured here.
Unfortunately, when I add in the rest of the shapes, my code does not work, as my browser is giving each shape a bounding box that covers the rest of the shapes. How can I make the mouseover shape of my svg precise and not a box?
Here is my HTML code:
<object data="images/logo/middle.svg"
type="image/svg+xml" class="middlesvg hoversvg" > <!-- only the middle is shown for brevity -->
</object>
CSS
.hoversvg
{
opacity: 0;
}
.hoversvg:hover{
opacity: 1;
}

Answer 1

You could do it straight in the SVG, no CSS required.
Draw each segment as its own polygon or path, and add a set attributeName tag into it:
<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path1.mouseover" end="path1.mouseout"/></path>
<path … id="path1"><set attributeName="opacity" from="0" to="1.0" begin="path2.mouseover" end="path2.mouseout"/></path>
etc.
This page has a bit more detail http://www.ibm.com/developerworks/library/x-svgint/ (scroll down to Events)

Answer 2

You'd need to implement the hovering within the middle.svg file. That way you can target the specific shape you want to change on hover.

Answer 3

Give each <path> in the SVG an id, like:
<svg xmlns="http://www.w3.org/2000/svg">
<path id="first-path"/>
<path id="second-path"/>
</svg>
Then you can select the individual paths in JS (e.g. document.querySelector('#first-path')) and do whatever you want with it.
To fill in the inside of the path, you could do something like this in your CSS:
#first-path {
cursor: pointer;
pointer-events: fill;
}
#first-path:hover {
fill: rgba(255,255,255,0.5);
}