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

3npbholx  于 2021-09-23  发布在  Java
关注(0)|答案(1)|浏览(323)

我试图弄明白为什么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>

有问题的工具提示就是此代码段中的提示：

<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 但它不起作用。我能做些什么来解决这个问题？

xmlJavaScripttextcsssvg

1条答案

按热度按时间
z8dt9xmd

z8dt9xmd1#

一个想法是在专用框中显示所有工具提示（参见一些视频游戏）。箱子可以位于固定位置，并具有静态或动态尺寸。这样，您就可以为弹出窗口保留一个位置，并可以对所有内容进行样式设置并相应地规划输出。
您甚至可以检查悬停元素的位置，如果它位于图像的上半部分，请在下半部分绘制工具提示框，反之亦然。

赞(0）分享  回复(0）举报  2021-09-23
我来回答

相关问题

    查看更多
    微信公众号

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com