javascript - 如何获取SVG元素的位置

Question

嗯，我有这个svg file (click me) 。现在，我希望工具提示脚本在鼠标位于元素上方时不在鼠标旁边显示工具提示，而是在其所属元素旁边显示工具提示。现在我知道，工具提示的位置是由 evt.clientX/evt.clientY 给出的。但我找不到一个函数来解决我的问题。

希望有人能帮助我...

这是我的代码:

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

您可以使用 rect 元素的 getBBox 方法，如下所示。
并且您应该将标题文本元素的pointerEvents样式值设置为“none”。

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