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建议的答案，我更新了代码。最新版本“几乎”可以满足我的所有需求。以克里斯的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>

使用onmouseover功能显示“热点”区域以及静态文本

1 个答案: