如何获得SVG元素的位置

Question

好吧，我有这个svg文件（点击我） 。 现在，我希望工具提示脚本在鼠标位于元素上方时， 不在工具旁边显示工具提示，而是在其所属元素旁边显示工具提示。 现在我知道，工具提示的位置由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>