允许在 XML/Javascript 工具提示中使用多行字符串

2024-05-20 • 问答

我正在使用以下 XML 代码创建一个 SVG：

<?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="453px" preserveAspectRatio="none" style="width:484px;height:453px;background:#FFFFFF;" version="1.1" viewBox="0 0 484 453" width="484px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f15vc1a2o1fe31" 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,bbox.x + bbox.width +8);
      tooltip_bg.setattributeNS(null,bbox.y + bbox.height+11);
      tooltip_bg.setattributeNS(null,"visibile");
    }
    function HideTooltip(evt){
      tooltip.setattributeNS(null,"hidden");
      tooltip_bg.setattributeNS(null,"hidden");
    }
  ]]>
    </script>
    <g>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="208.5" y="118.3125"/>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="408.5" y="292.0703"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="90" x2="90" y1="41.6094" y2="409.125"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="213" x2="213" y1="41.6094" y2="409.125"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="413" x2="413" y1="41.6094" y2="409.125"/>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="106" x="35" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="92" x="42" y="26.5332">testExportSVG</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="106" x="35" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="92" x="42" y="429.6582">testExportSVG</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="155" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="162" y="26.5332">Web API Step 1</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="155" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="162" y="429.6582">Web API Step 1</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="355" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="362" y="26.5332">Web API Step 2</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="355" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="362" y="429.6582">Web API Step 2</text>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="208.5" y="118.3125"/>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="408.5" y="292.0703"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="3" style="stroke:#EEEEEE;stroke-width:1.0;" width="477" x="0" y="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="72.7852" y2="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="75.7852" y2="75.7852"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="24.3516" style="stroke:#000000;stroke-width:2.0;" width="207" x="135" y="61.6094"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="193" x="141" y="79.1045">step 1: account.account Credit</text>
        <polygon fill="#A80036" points="196.5,114.3125,206.5,118.3125,196.5,122.3125,200.5,118.3125" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;" x1="90" x2="202.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="79" x="108" y="113.4561">xecmPayload</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" 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 = data;')" onmouseout="HideTooltip(evt)">
static data 1</a>
        </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="212.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(#f15vc1a2o1fe31)" 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 ← other/path;\nsaveV ← /xml/path;\n')" onmouseout="HideTooltip(evt)">
validation data 1</a>
        </text>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="3" style="stroke:#EEEEEE;stroke-width:1.0;" width="477" x="0" y="246.543"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="246.543" y2="246.543"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="249.543" y2="249.543"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="24.3516" style="stroke:#000000;stroke-width:2.0;" width="296" x="90.5" y="235.3672"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="282" x="96.5" y="252.8623">step 2: Abstraction.loan_bundles_abstraction</text>
        <polygon fill="#A80036" points="396.5,288.0703,406.5,292.0703,396.5,296.0703,400.5,292.0703" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;" x1="213.5" x2="402.5" y1="292.0703" y2="292.0703"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="220.5" y="287.2139">3</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="165" x="231.5" y="287.2139">create_loan_sanitywatercost</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="80" x="128" y="305.0703"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="72" x="132" y="322.5654">
            <a onmousemove="ShowTooltip(evt,'some = data')" onmouseout="HideTooltip(evt)">
static data 2</a>
        </text>
        <polygon fill="#A80036" points="224.5,352.7734,214.5,356.7734,224.5,360.7734,220.5,356.7734" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:2.0,2.0;" x1="218.5" x2="412.5" y1="356.7734" y2="356.7734"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="230.5" y="351.917">4</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="29" x="241.5" y="351.917">[204]</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="101" x="163" y="369.7734"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="167" y="387.2686">
            <a onmousemove="ShowTooltip(evt,'saveJson ← json.path;\n')" onmouseout="HideTooltip(evt)">
validation data 2</a>
        </text>
        <!--MD5=[4d7fcf74e484c9aebaed7917263f6fd7]
@startuml 
autonumber 
==step 1: account.account Credit== 
"testExportSVG"->"Web API Step 1": xecmPayload 
rnote left "testExportSVG"
static data 1
endrnote 
activate "Web API Step 1"
"testExportSVG" <- - "Web API Step 1": [200] 
rnote over "testExportSVG"
validation data 1
endrnote 
deactivate "Web API Step 1"
==step 2: Abstraction.loan_bundles_abstraction== 
"Web API Step 1"->"Web API Step 2": create_loan_sanitywatercost 
rnote left "Web API Step 1"
static data 2
endrnote 
activate "Web API Step 2"
"Web API Step 1" <- - "Web API Step 2": [204] 
rnote over "Web API Step 1"
validation data 2
endrnote 
deactivate "Web API Step 2"
@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>

对于工具提示之一，我希望文本在分号处环绕。我曾尝试使用自动换行 CSS 属性来实现此目的，我尝试将其拆分为两个字符串，我尝试使用反斜杠字符等。但这些策略均无效。

        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="43" y="213.5107">
            <a onmousemove="ShowTooltip(evt,'otherVar ← other/path;\nsaveV ← /xml/path;\n')" onmouseout="HideTooltip(evt)">
validation data 1</a>
</text>

那么我该如何拆分那些有 "\n" 的行？

（这是我的 jsfiddle）

yorita 回答：允许在 XML/Javascript 工具提示中使用多行字符串

我设法使用 tspan 元素制作了一些原型：http://jsfiddle.net/9sk5xfz4/1/

<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="453px" preserveAspectRatio="none" style="width:484px;height:453px;background:#FFFFFF;" version="1.1" viewBox="0 0 484 453" width="484px" zoomAndPan="magnify">
    <defs>
        <filter height="300%" id="f15vc1a2o1fe31" 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);
      const lines = mouseovertext.split('\n');
      if (lines.length === 1)
         tooltip.textContent = mouseovertext;
      else {
         tooltip.textContent = '';
         lines.map((s,p) => { const tspan = document.createElementNS('http://www.w3.org/2000/svg','tspan'); tspan.textContent = s; tspan.setAttributeNS(null,'x',bbox.x + bbox.width +11); tspan.setAttributeNS(null,'dy',(p === 0 ? 0 : 15).toString()); return tspan; }).forEach(tspan => tooltip.appendChild(tspan));
      }
      tooltip.setAttributeNS(null,"visibility","visible");
      const tooltipBBox = tooltip.getBBox();
      tooltip_bg.setAttributeNS(null,"height",tooltipBBox.height+8);
      tooltip_bg.setAttributeNS(null,"width",tooltipBBox.width+8);
      tooltip_bg.setAttributeNS(null,bbox.x + bbox.width +8);
      tooltip_bg.setAttributeNS(null,bbox.y + bbox.height+11);
      tooltip_bg.setAttributeNS(null,"visibile");
    }
    function HideTooltip(evt){
      tooltip.setAttributeNS(null,"hidden");
      tooltip_bg.setAttributeNS(null,"hidden");
    }
  ]]>
    </script>
    <g>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="208.5" y="118.3125"/>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="408.5" y="292.0703"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="90" x2="90" y1="41.6094" y2="409.125"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="213" x2="213" y1="41.6094" y2="409.125"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:5.0,5.0;" x1="413" x2="413" y1="41.6094" y2="409.125"/>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="106" x="35" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="92" x="42" y="26.5332">testExportSVG</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="106" x="35" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="92" x="42" y="429.6582">testExportSVG</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="155" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="162" y="26.5332">Web API Step 1</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="155" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="162" y="429.6582">Web API Step 1</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="355" y="5"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="362" y="26.5332">Web API Step 2</text>
        <rect fill="#FEFECE" filter="url(#f15vc1a2o1fe31)" height="31.6094" style="stroke:#A80036;stroke-width:1.5;" width="113" x="355" y="408.125"/>
        <text fill="#000000" font-family="sans-serif" font-size="14" lengthAdjust="spacing" textLength="99" x="362" y="429.6582">Web API Step 2</text>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="208.5" y="118.3125"/>
        <rect fill="#FFFFFF" filter="url(#f15vc1a2o1fe31)" height="64.7031" style="stroke:#A80036;stroke-width:1.0;" width="10" x="408.5" y="292.0703"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="3" style="stroke:#EEEEEE;stroke-width:1.0;" width="477" x="0" y="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="72.7852" y2="72.7852"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="75.7852" y2="75.7852"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="24.3516" style="stroke:#000000;stroke-width:2.0;" width="207" x="135" y="61.6094"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="193" x="141" y="79.1045">step 1: Account.Account Credit</text>
        <polygon fill="#A80036" points="196.5,114.3125,206.5,118.3125,196.5,122.3125,200.5,118.3125" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;" x1="90" x2="202.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="79" x="108" y="113.4561">xecmPayload</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" 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 = data;')" onmouseout="HideTooltip(evt)">
static data 1</a>
        </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="212.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(#f15vc1a2o1fe31)" 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 ← other/path;\nsaveV ← /xml/path;')" onmouseout="HideTooltip(evt)">
validation data 1</a>
            <a onmousemove="ShowTooltip(evt,'otherVar ← other/path;\nsaveV ← /xml/path;')" onmouseout="HideTooltip(evt)">
validation data 1</a>

        </text>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="3" style="stroke:#EEEEEE;stroke-width:1.0;" width="477" x="0" y="246.543"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="246.543" y2="246.543"/>
        <line style="stroke:#000000;stroke-width:1.0;" x1="0" x2="477" y1="249.543" y2="249.543"/>
        <rect fill="#EEEEEE" filter="url(#f15vc1a2o1fe31)" height="24.3516" style="stroke:#000000;stroke-width:2.0;" width="296" x="90.5" y="235.3672"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="282" x="96.5" y="252.8623">step 2: Abstraction.loan_bundles_abstraction</text>
        <polygon fill="#A80036" points="396.5,288.0703,406.5,292.0703,396.5,296.0703,400.5,292.0703" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;" x1="213.5" x2="402.5" y1="292.0703" y2="292.0703"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="220.5" y="287.2139">3</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="165" x="231.5" y="287.2139">create_loan_sanitywatercost</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="80" x="128" y="305.0703"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="72" x="132" y="322.5654">
            <a onmousemove="ShowTooltip(evt,'some = data')" onmouseout="HideTooltip(evt)">
static data 2</a>
        </text>
        <polygon fill="#A80036" points="224.5,352.7734,214.5,356.7734,224.5,360.7734,220.5,356.7734" style="stroke:#A80036;stroke-width:1.0;"/>
        <line style="stroke:#A80036;stroke-width:1.0;stroke-dasharray:2.0,2.0;" x1="218.5" x2="412.5" y1="356.7734" y2="356.7734"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" font-weight="bold" lengthAdjust="spacing" textLength="7" x="230.5" y="351.917">4</text>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="29" x="241.5" y="351.917">[204]</text>
        <rect fill="#FBFB77" filter="url(#f15vc1a2o1fe31)" height="24" style="stroke:#A80036;stroke-width:1.0;" width="101" x="163" y="369.7734"/>
        <text fill="#000000" font-family="sans-serif" font-size="13" lengthAdjust="spacing" textLength="93" x="167" y="387.2686">
            <a onmousemove="ShowTooltip(evt,'saveJson ← json.path;\n')" onmouseout="HideTooltip(evt)">
validation data 2</a>
        </text>
        <!--MD5=[4d7fcf74e484c9aebaed7917263f6fd7]
@startuml 
autonumber 
==step 1: Account.Account Credit== 
"testExportSVG"->"Web API Step 1": xecmPayload 
rnote left "testExportSVG"
static data 1
endrnote 
activate "Web API Step 1"
"testExportSVG" <- - "Web API Step 1": [200] 
rnote over "testExportSVG"
validation data 1
endrnote 
deactivate "Web API Step 1"
==step 2: Abstraction.loan_bundles_abstraction== 
"Web API Step 1"->"Web API Step 2": create_loan_sanitywatercost 
rnote left "Web API Step 1"
static data 2
endrnote 
activate "Web API Step 2"
"Web API Step 1" <- - "Web API Step 2": [204] 
rnote over "Web API Step 1"
validation data 2
endrnote 
deactivate "Web API Step 2"
@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>

ecmascript-6 javascript line svg xml

本文链接：https://www.f2er.com/14357.html

允许在 XML/Javascript 工具提示中使用多行字符串

yorita 回答：允许在 XML/Javascript 工具提示中使用多行字符串

大家都在问