Question

在这个svg file(KLICK ME)中我希望有一个更详细的工具提示，其中包含更多行。所以我需要某种线路。我已经尝试了所有\n，<br>和
没有效果......我在网上找不到更多内容，所以我希望一些javascript破解可以帮助我：D < / p>

这是我的代码：

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

为什么不使用应支持此功能的原生工具？

<a xlink:href="webseite.html">
  <title>Toolip
zu b</title>
  <rect x="100" y="0" ry="1" width="40" height="50" style="fill:gold;" />
</a>

否则，您需要在<text>元素中创建多个<tspan>元素或嵌入<text>元素，以便您可以指定dy偏移来模拟换行符。即你必须自己编写多行支持代码。

您需要生成类似

的内容

<text x="10" y="20">Toolip<tspan x="10" dy="1em">zu b</tspan></text>

其中x和y值取决于对象的位置。

或者。如果您不关心IE支持，请使用foreignObject元素作为工具提示，并依赖html的文本格式化功能自动插入换行符。

Answer 2

如果需要，您可以使用具有更高z-index的绝对div作为工具提示。这支持其中的任何类型的html格式，因为它只是div标记。

这是一个小提示：http://jsfiddle.net/pbja2ju6/

如何在javascript工具提示中进行换行

2 个答案: