尽管动态长度，SVG 工具提示文本被截断答案

【问题标题】：SVG tooltip text getting cut off despite dynamic length尽管动态长度，SVG 工具提示文本被截断
【发布时间】：2021-07-10 09:05:07
【问题描述】：

我试图弄清楚为什么我的 SVG 会截断工具提示中的文本。

这是 XML 代码：

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg onload="init(evt)"
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink" contentScriptType="application/ecmascript" contentStyleType="text/css" height="279px" preserveAspectRatio="none" style="width:300px;height:279px;background:#FFFFFF;" version="1.1" viewBox="0 0 300 279" width="300px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f1a2x7zkhg3k0o" width="300%" x="-1" y="-1">
            <feGaussianBlur result="blurOut" stdDeviation="2.0"/>
            <feColorMatrix in="blurOut" result="blurOut2" type="matrix" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 .4 0"/>
            <feOffset dx="4.0" dy="4.0" in="blurOut2" result="blurOut3"/>
            <feBlend in="SourceGraphic" in2="blurOut3" mode="normal"/>
        </filter>
    </defs>
    <style>
    .tooltip{
      font-family: Arial;
      font-size: 13px;
      fill:black;
    }
    .tooltip_bg{
      fill: yellow;
      opacity: 1;
    }
  </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",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",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>
    <g>
        <rect fill="#FFFFFF" filter="url(#f1a2x7zkhg3k0o)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="224.5" y="118.3125"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="90" x2="90" y1="41.6094" y2="235.3672"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="229" x2="229" y1="41.6094" y2="235.3672"/>
        <rect fill="#FEFECE" filter="url(#f1a2x7zkhg3k0o)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="138" x="19" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="124" x="26" y="26.5332">webAPICreateMode</text>
        <rect fill="#FEFECE" filter="url(#f1a2x7zkhg3k0o)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="138" x="19" y="234.3672"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="124" x="26" y="255.9004">webAPICreateMode</text>
        <rect fill="#FEFECE" filter="url(#f1a2x7zkhg3k0o)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="171" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="178" y="26.5332">Web API Step 1</text>
        <rect fill="#FEFECE" filter="url(#f1a2x7zkhg3k0o)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="171" y="234.3672"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="178" y="255.9004">Web API Step 1</text>
        <rect fill="#FFFFFF" filter="url(#f1a2x7zkhg3k0o)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="224.5" y="118.3125"/>
        <rect fill="#EEEEEE" filter="url(#f1a2x7zkhg3k0o)" height="3" style="stroke:#EEEEEE;stroke-width:1.0;" width="293" x="0" y="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="293" y1="72.7852" y2="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="293" y1="75.7852" y2="75.7852"/>
        <rect fill="#EEEEEE" filter="url(#f1a2x7zkhg3k0o)" height="24.3516" style="stroke:#000000;stroke-width:2.0;" width="207" x="43" y="61.6094"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="193" x="49" y="79.1045">step 1: Account.Account Credit</text>
        <polygon fill="#A80036" points="212.5,114.3125,222.5,118.3125,212.5,122.3125,216.5,118.3125" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;" x1="90" x2="218.5" y1="118.3125" y2="118.3125"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="97" y="113.4561">1</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="59" x="108" y="113.4561">Divyaabca</text>
        <rect fill="#FBFB77" filter="url(#f1a2x7zkhg3k0o)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="80" x="5" y="131.3125"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="72" x="9" y="148.8076">
            <a onmousemove="ShowTooltip(evt, '(input = 123); (other = 456); ')" onmouseout="HideTooltip(evt)">
static data</a> 1
        </text>
        <polygon fill="#A80036" points="101,179.0156,91,183.0156,101,187.0156,97,183.0156" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:2.0,2.0;" x1="95" x2="228.5" y1="183.0156" y2="183.0156"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="107" y="178.1592">2</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="29" x="118" y="178.1592">[200]</text>
        <rect fill="#FBFB77" filter="url(#f1a2x7zkhg3k0o)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="101" x="39" y="196.0156"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="43" y="213.5107">
            <a onmousemove="ShowTooltip(evt, 'otherVar ← {{PATH2}} saveV ← {{PATH}}')" onmouseout="HideTooltip(evt)">
validation data 1</a>
        </text>
        <!--MD5=[6ce68cb015799a4df6769e34b7f2eea5]
@startuml 
autonumber 
==step 1: Account.Account Credit== 
"webAPICreateMode"->"Web API Step 1": Divyaabca  
rnote left "webAPICreateMode"
static data 1
endrnote 
activate "Web API Step 1"
"webAPICreateMode" <- - "Web API Step 1": [200] 
rnote over "webAPICreateMode"
validation data 1
endrnote 
deactivate "Web API Step 1"
@enduml

PlantUML version 1.2021.8(Sat Jun 26 01:20:59 PDT 2021)
(GPL source distribution)
Java Runtime: Java(TM) SE Runtime Environment
JVM: Java HotSpot(TM) 64-Bit Server VM
Default Encoding: UTF-8
Language: en
Country: US
-->
    </g>
    <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>

有问题的工具提示是这个 sn-p 中的一个：

        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="43" y="213.5107">
            <a onmousemove="ShowTooltip(evt, 'otherVar ← {{PATH2}} saveV ← {{PATH}}')" onmouseout="HideTooltip(evt)">
validation data 1</a>
        </text>

我认为我的ShowTooltip 函数在调用tooltip.getComputedTextLength() 时会计算出正确的所需长度。我尝试使用样式标签，增加textLength 并更改lengthAdjust，但它没有用。我该怎么做才能解决这个问题？

【问题讨论】：

溢出viewBox的地方是不可见的
@RobertLongson 哦，我明白了！有没有办法在 showTooltip 方法中动态改变它？例如，如果它计算出所需的宽度（比如它的长度 + bbox.x）并且它大于 viewbox 的宽度？
为什么不把 viewBox 做大一点？
以上文件是通过程序生成的。澄清一下，我使用PlantUML 库将UML 图导出到XML 字符串，该字符串写入某个文件。所以我很遗憾无法对其进行硬编码

标签： javascript css xml svg text

【解决方案1】：

一个想法是在专用框中显示所有工具提示（参见一些视频游戏）。盒子可以在固定的位置并具有静态或动态尺寸。这样你就可以为弹出窗口保留一个位置，并且可以为所有内容设置样式并相应地计划输出。

您甚至可以检查悬停元素的位置，如果它在图像的上半部分，则在下半部分绘制工具提示框，反之亦然。

【讨论】：