XML/Javascript 工具提示中允许多行字符串
Allow multi-line strings in XML/Javascript tooltip
我正在使用以下 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,"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(#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 属性 来做到这一点，我尝试将它分成两个字符串，我尝试使用反斜杠字符等。但是 none 那些策略奏效了。
<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）
我设法使用 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,"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(#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>
我正在使用以下 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,"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(#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 属性 来做到这一点，我尝试将它分成两个字符串，我尝试使用反斜杠字符等。但是 none 那些策略奏效了。
<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）
我设法使用 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,"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(#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>