创建SVG图像工具提示

Question

嗨伙计们我需要一些帮助我需要创建一个带有图像的工具提示，但这是一个svg地图所以我不能使用像css和html中的div。我已设法创建一个图像工具提示。但是只有一个图像可以出现当我悬停在所有元素上时，如何为不同的svg元素显示不同的图像？这是我用于工具提示的代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.0//EN" "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" onload="init(evt)" width="380" height="100">

  <style>
    .caption{
    font-size: 14px;
    font-family: Georgia, serif;
    }
    .tooltip{
    font-size: 12px;
    }
    .tooltip_bg{
    fill: white;
    stroke: black;
    stroke-width: 1;
    opacity: 0.85;
    }
  </style>

  <script type="text/ecmascript">
    <![CDATA[

    function init(evt)
    {
        if ( window.svgDocument == null )
        {
        svgDocument = evt.target.ownerDocument;
        }

        tooltip = svgDocument.getElementById('tooltip');
        tooltip_bg = svgDocument.getElementById('tooltip_bg');

    }

    function ShowTooltip(evt, mouseovertext)
    {
        tooltip.setAttributeNS(null,"x",evt.clientX+11);
        tooltip.setAttributeNS(null,"y",evt.clientY+27);

        tooltip.setAttributeNS(null,"visibility","visible");

        length = tooltip.getComputedTextLength();
        tooltip_bg.setAttributeNS(null,"width",length+8);
        tooltip_bg.setAttributeNS(null,"x",evt.clientX+8);
        tooltip_bg.setAttributeNS(null,"y",evt.clientY+14);
        tooltip_bg.setAttributeNS(null,"visibility","visibile");
    }

    function HideTooltip(evt)
    {
        tooltip.setAttributeNS(null,"visibility","hidden");
        tooltip_bg.setAttributeNS(null,"visibility","hidden");
    }

    ]]>
  </script>

  <text class="caption" x="10" y="35">Mouseover a square</text>
  <text class="caption" x="10" y="50">to display a tooltip</text>

  <rect id="rect1" x="160" y="10" width="60" height="60" fill="blue"
   onmousemove="ShowTooltip(evt)"
    onmouseout="HideTooltip(evt)"/>

  <rect id="rect2" x="240" y="10" width="60" height="60" fill="green"
   onmousemove="ShowTooltip(evt)"
    onmouseout="HideTooltip(evt)"/>

  <rect class="tooltip_bg" id="tooltip_bg"
      x="0" y="0" rx="4" ry="4"
      width="55" height="17" visibility="hidden"/>

  <image xlink:href="Blooper-icon.png" class="tooltip" id="tooltip"x="0" y="0"height="50px"width="50px"visibility="hidden"/>  
</svg>

Answer 1

在HTML中

 <div class="svgTooltip"></div>
    <svg>
     <path class="tempClass" .......>
     </path>
    </svg>

在CSS中

.svgTooltip {
  pointer-events: none;
  position: absolute;
  font-size: 15px;
  text-align: center;
  background: white;
  padding-bottom: 5px;
  padding-left: 5px;
  padding-right: 5px;
  z-index: 5;
  height: 30px;
  line-height: 30px;
  margin: 0 auto;
  color: #21669e;
  border-radius: 5px;
  box-shadow: 0 0 0 1px rgb(122, 92, 92);
  display: none;
}

.svgTooltip::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 100%;
  width: 0;
  height: 0;
  margin-left: -10px;
  border-left: 10px solid transparent;
  border-right: 10px solid transparent;
  border-top: 10px solid rgb(122, 92, 92);
}
.active {
  display: block;
}

在JS中

$(function() {
  $tooltip = $(".svgTooltip");

  $(".tempClass").hover(
    function() {
      $tooltip.addClass("active");
      $tooltip.html($(this).attr("title"));
    },
    function() {
      $tooltip.removeClass("active");
    }
  );
});

$(document).on("mousemove", function(e) {
  $tooltip.css({
    left: e.pageX - 30,
    top: e.pageY - 70
  });
});