I'm using an SVG group within a web page, there is an area within the SVG that defines a 'hotspot' on the graphic (defined by the 'path' in the code below). When a mouseover occurs within the path I would like to have the hotspot highlighted as well as text to appear describing the item outlined by the path. In this case the path is a rectangle outlining a Carbon Monoxide detector. Upon clicking within the hotspot, I want to forward the user to a link (in this example, 'google.com'). The code below works, however the text is displayed only as the outline of the font (no fill). I would prefer a solid fill, and have tried playing with the fill opacity attribute with no success. Any suggestions would be appreciated.
<g id="CO_Detector">
'''<a
xlink:href= "http://www.google.com/">
<path d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
fill-opacity="0" stroke-width="4"
onmouseover="CO_Detector.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</a>'''
Deleted 'fill-opacity' attribute and added the full page code (below)as suggested by Chris. Without the 'backgroundImage.png', when the file is launched in a browser, only two rectangular black areas are visible. When hovering over those areas they become highlighted in red and corresponding text appears at the bottom of the image. If the same type of effect can be achieved using CSS I would be interested to see an example.
Here is the full code:
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 800, 600">
<defs>
<clipPath id="Clip_1">
<path d="M0,0 L800,0 L800,600 L0,600 z"/>
</clipPath>
</defs>
<g id="Image">
<image xlink:href="backgroundImage.png" opacity="1" width="800" height="600" x="0" y="0" />
</g>
<g id="CO_Detector">
'''<a
xlink:href= "http://www.google.com/">
<path d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
stroke-width="4"
onmouseover="CO_Detector.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</a>'''
</g>
<g id="Inverter">
'''<a
xlink:href= "http://www.bing.com/">
<path d="M268.729,154.323 L493.119,154.323 L493.119,198.647 L268.729,198.647 L268.729,154.323 z"
stroke-width="4"
onmouseover="Inverter.setAttribute('stroke', 'rgb(255,0,0)')"
onmouseout ="Inverter.removeAttribute('stroke')" />
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="AndaleMono" fill-opacity="0" stroke-width="2" font-size="72">Inverter</tspan>
</text>
</a>'''
</g>
</svg>
Based on the answer suggested by @ChrisW below I have updated the code. This latest version 'almost' does everything I need. Using Chris' CSS code as a starting point I slightly modified his style to remove the fill pattern and change the stroke to 'red'. Also, I moved the anchor tags so they now do NOT include the text areas of the group. The previous anchor positioning caused the associated hyperlink to be active when hovering over the text span area. I did not recognize this problem originally. The code below does just about everything I'm looking for with one exception: the text that appears when hovering is not filled.
.hoverableBox:hover {
stroke: red;
}<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0" y="0" viewBox="0, 0, 800, 600">
<defs>
<clipPath id="Clip_1">
<path d="M0,0 L800,0 L800,600 L0,600 z"/>
</clipPath>
</defs>
<g id="Image">
<image xlink:href="../pics/181030_equipmentBox.png" opacity="1" width="800" height="600" x="0" y="0" />
</g>
<g id="CO_Detector">
'''<a
xlink:href= "CO_Detector.html">
<path class="hoverableBox" d="M114,75 L196,75 L196,137 L114,137 L114,75 z"
stroke-width="4" fill-opacity="0.1"
onmouseover="CO_Detector.setAttribute('stroke', 'red')"
onmouseout ="CO_Detector.removeAttribute('stroke')" />
</a>'''
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="Arial" fill-opacity="0" stroke-width="2" font-size="72">CO Detector</tspan>
</text>
</g>
<g id="Inverter">
'''<a
xlink:href= "inverter.html">
<path d="M268.729,154.323 L493.119,154.323 L493.119,198.647 L268.729,198.647 L268.729,154.323 z"
stroke-width="4" fill-opacity="0.1"
onmouseover="Inverter.setAttribute('stroke', 'red')"
onmouseout ="Inverter.removeAttribute('stroke')" />
</a>'''
<text transform="matrix(1, 0, 0, 1, 404.26, 535)">
<tspan x="-367.26" y="24" font-family="Arial" fill-opacity="0" stroke-width="2" font-size="72">Inverter</tspan>
</text>
</g>
</svg>
Actually, upon further review, the style sheet is completely unnecessary. Since the onmouseover and onmouseout statements are still being used to affect the text object within each group these statements also control the stroke properly of the hotspot box. So, the original question persists: is there a simple way to change the text fill pattern when hovering over the associated hotspot?
fill-opacityon the path, you can give it a css class and do:hoverwith afill: colorsame as regular css and you can attach a click event to the path to. – Chris W.