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

删除了“填充-不透明度”属性，并添加了完整的页面代码（以下），如克里斯的建议。如果没有“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;
}

html prettyprint-override"><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>