使用onmouseover函数显示'热点'区域以及静态文本

Question

我在网页中使用SVG组，SVG中有一个区域定义了图形上的"热点"(由下面代码中的"路径"定义(。当鼠标悬停在路径内时，我希望突出显示热点，并显示描述路径所列项目的文本。在这种情况下，路径是一个勾勒出一氧化碳探测器轮廓的矩形。点击热点后，我想将用户转发到一个链接(在本例中为"google.com"(。下面的代码有效，但文本仅显示为字体的轮廓(没有填充(。我更喜欢实心填充，并尝试过使用填充不透明度属性，但没有成功。如有任何建议，我们将不胜感激。

<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>'''

删除了"填充不透明度"属性，并按照Chris的建议添加了完整的页面代码(如下(。如果没有"backgroundImage.png"，当文件在浏览器中启动时，只有两个矩形黑色区域可见。当鼠标悬停在这些区域上时，它们将变为红色突出显示，相应的文本将显示在图像的底部。如果使用CSS可以实现相同类型的效果，我很想看看一个例子。

这是完整的代码：

<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>

根据@ChrisW在下面给出的答案，我更新了代码。这个最新版本"几乎"满足了我的所有需求。以Chris的CSS代码为起点，我稍微修改了他的风格，删除了填充图案，并将笔划改为"红色"。此外，我移动了锚标记，这样它们现在就不包括组的文本区域了。将鼠标悬停在文本跨度区域上时，先前的定位导致关联的超链接处于活动状态。我最初没有意识到这个问题。下面的代码几乎完成了我要查找的所有内容，但有一个例外：悬停时显示的文本没有填充。

.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>

事实上，经过进一步审查，样式表是完全没有必要的。由于onmouseover和onmouseout语句仍在用于影响每组中的文本对象，因此这些语句还可以正确控制热点框的笔划。因此，最初的问题仍然存在：当鼠标悬停在相关热点上时，有没有一种简单的方法可以更改文本填充模式？

Answer 1

因此，为了通知注释，当svg是css类可以访问的dom的一部分时，通常可以将它们或多或少地视为任何其他css。希望这能有所帮助。

.hoverable:hover {
fill: red;
stroke: blue;
transition: fill .25s, stroke .5s;
}

<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 class="hoverable" d="M114,75 L196,75 L196,137 L114,137 L114,75 z" 
stroke-width="4"/>
<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 class="hoverable" 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"/>
<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>