如何获得SVG元素的位置

Question

Well I have this svg file (click me) . Now I want the tooltip script to show the tooltips not next to the mouse, but next to the element which it belongs to, when the mouse is above the element. Now i know, that the position of the tooltip is given by evt.clientX / evt.clientY . But I couldn't find a function, solving my problem.

I hope somebody can help me...

Here goes my code:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg"  xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
  <style>
    .tooltip{
      font-family: Verdana;
      fill:white;
    }
    .tooltip_bg{
      fill: black;
      opacity: 0.5;
    }
  </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.firstChild.data = mouseovertext;
        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+11);
        tooltip_bg.setAttributeNS(null,"visibility","visibile");
      }
      function HideTooltip(evt){
        tooltip.setAttributeNS(null,"visibility","hidden");
        tooltip_bg.setAttributeNS(null,"visibility","hidden");
      }
    ]]>
  </script>

  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
  </a>

  <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
  <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>

Answer 1

You can use getBBox method of rect element, like this.
And you should set pointerEvents style value of caption text element to "none".

see http://jsfiddle.net/s0z9o00g/2/

<?xml version="1.0" encoding="UTF-8"?>
<svg width="440" height="391" onload="init(evt)" xmlns="http://www.w3.org/2000/svg"   xmlns:xlink="http://www.w3.org/1999/xlink" style="background-color:white;">
  <style>
    .tooltip{
      font-family: Verdana;
      fill:white;
    }
    .tooltip_bg{
      fill: black;
      opacity: 0.5;
    }
    text{
      pointer-events:none;
    }
  </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){
      var el = evt.target;
      var bbox = el.getBBox();
      //tooltip.setAttributeNS(null,"x",evt.clientX+11);
      //tooltip.setAttributeNS(null,"y",evt.clientY+27);
      tooltip.setAttributeNS(null,"x",bbox.x + bbox.width +11);
      tooltip.setAttributeNS(null,"y",bbox.y + bbox.height+27);
      tooltip.firstChild.data = mouseovertext;
      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+11);
      tooltip_bg.setAttributeNS(null,"x",bbox.x + bbox.width +8);
      tooltip_bg.setAttributeNS(null,"y",bbox.y + bbox.height+11);
      tooltip_bg.setAttributeNS(null,"visibility","visibile");
    }
    function HideTooltip(evt){
      tooltip.setAttributeNS(null,"visibility","hidden");
      tooltip_bg.setAttributeNS(null,"visibility","hidden");
    }
  ]]>
  </script>

  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 01')" onmouseout="HideTooltip(evt)">
    <text x="120" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">01</text>
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <rect x="200" y="0" ry="1" width="40" height="50" style="fill:gold;" />
  </a>
  <a xlink:href="webseite.html" onmousemove="ShowTooltip(evt, 'Tooltip zu 02')" onmouseout="HideTooltip(evt)">
    <text x="220" y="25" text-anchor="middle" dominant-baseline="central" font-family="sans-serif">02</text>
  </a>

  <rect class="tooltip_bg" id="tooltip_bg" x="0" y="0" ry="2" width="55" height="21" visibility="hidden"/>
  <text class="tooltip" id="tooltip" x="0" y="0" visibility="hidden">Tooltip</text>
</svg>