image-map, SVG and <tspan> text...

1209
3
12-11-2019 07:01 AM
JimPugh2
New Contributor II

I've been working with the new image-map tool with great results. Makes for a fantastic UI. However, when placing text inside the boxes for user's to 'click',  the multiline tool in SVG (TSPAN) is not being recognized in S123.

In my development environment, everything looks great: 

SVG in development environment

Note the multi line, horz & vert centered text.

However, note the same SVG, displayed S123: the multi line text is ignored and multiple rows are merged into one:

Same SVG displayed in S123

Here's an SVG extract of the text in the bottom left corner:

<text
   x="50" y="350"
   dominant-baseline="central"
   text-anchor="middle"
   font-family="sans-serif"
   font-weight="bold"
   font-size="18px"
   fill="#000000"
   stroke="none">
    <tspan x="50" dy="-1.2em">&#127760;</tspan>
    <tspan x="50" dy="1.2em">Map</tspan>
    <tspan x="50" dy="1.2em">Note</tspan>
</text>

Any help or suggestions are welcome!

JP

0 Kudos
3 Replies
BrettStokes
Esri Contributor

Hi JP,

Can you please share your SVG file for me to investigate further? I haven't actually tested multiline SVG text with the image-map appearance. It seems your font has not been embedded either, so I will try to remedy that too.

Brett

0 Kudos
JimPugh2
New Contributor II

Sorry - should have done that with the original post. 

The best I can figure so far is that this is browser-dependent. IE and Chrome have no problem, but whatever browser-engine S123 Connect and Windows are using doesn't recognizance the <TSPAN>.

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
xmlns:svg="http://www.w3.org/2000/svg"
xmlns="http://www.w3.org/2000/svg"
width="400"
height="400">

<g style="fill:#ffffff;stroke:#000000;stroke-width:1">
<!-- build paths for S123. ID is the form to be called. -->

<!-- SKIP button -->
<path
d="M 0,0 200,0 200,100 0,100 Z"
id="itis_surv_skip_btn" />

<!-- NO Conditions found button -->
<path
d="M 200,0 400,0 400,100 200,100 Z"
id="itis_surv_no_cond_btn" />

<!-- CONFIRM previous conditions button -->
<path
d="M 0,100 200,100 200,200 0,200 Z"
id="itis_surv_conf_prev_btn" />

<!-- ADD NEW Condition button -->
<path
d="M 200,100 400,100 400,200 200,200 Z"
id="itis_surv_add_cond_btn" />

<!-- DONE with Inspection button -->
<path
d="M 0,200 400,200 400,300 0,300 Z"
id="itis_surv_done_btn" />

<!-- Add Map Issue button -->
<path
d="M 0,300 100,300 100,400 0,400 Z"
id="fc79475f525149c7a35b63dbb1395a65" />
<!-- Add Data Issue button -->
<path
d="M 100,300 200,300 200,400 100,400 Z"
id="5bee7f32daed4e53a7444547276b4356" />

<!-- Add Property/Owner button -->
<path
d="M 200,300 300,300 300,400 200,400 Z"
id="26fca656defe49788b41c9a2b6f44da2" />

<!-- Add Access Road button -->
<path
d="M 300,300 400,300 400,400 300,400 Z"
id="itis_surv_accs_road_btn" />

</g>

<rect
id="rect01"
width="200" height="100"
x="0" y="0"
title="SKIP this structure."
fill="salmon" stroke="lightgray" stroke-width="6" />

<rect
id="rect02"
width="200" height="100"
x="200" y="0"
title="NO conditions at this structure."
fill="navajowhite" stroke="lightgray" stroke-width="10" />

<rect
id="rect03"
width="200" height="100"
x="0" y="100"
title="CONFIRM previous conditions."
fill="lightblue" stroke="lightgray" stroke-width="10" />

<rect
id="rect04"
width="200" height="100"
x="200" y="100"
title="Add a NEW condition at this structure."
fill="palegreen" stroke="lightgray" stroke-width="10" />

<rect
id="rect05"
width="400" height="100"
x="0" y="200"
title="DONE with this structure inspection."
fill="plum" stroke="lightgray" stroke-width="10" />

<rect
id="rect06"
width="100" height="100"
x="0" y="300"
title="Add a MAP NOTE."
fill="navajowhite" stroke="lightgray" stroke-width="10" />

<rect
id="rect07"
width="100" height="100"
x="100" y="300"
title="Add a DATA ISSUE note."
fill="lightblue" stroke="lightgray" stroke-width="10" />

<rect
id="rect08"
width="100" height="100"
x="200" y="300"
title="Add a PROPERTY / OWNER note."
fill="palegreen" stroke="lightgray" stroke-width="10" />

<rect
id="rect09"
width="100" height="100"
x="300" y="300"
title="Add an ACCESS ROAD."
fill="plum" stroke="lightgray" stroke-width="10" />

<text
x="100" y="50"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="20px"
fill="#000000"
stroke="none">
<tspan x="100" dy="-0.6em">&#8631; SKIP</tspan>
<tspan x="100" dy="1.2em">this structure</tspan>
</text>

<text
x="300" y="50"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="20px"
fill="#000000"
stroke="none">
<tspan x="300" dy="-1.2em">&#9989; NO Conditions</tspan>
<tspan x="300" dy="1.2em">found at</tspan>
<tspan x="300" dy="1.2em">this structure</tspan>
</text>

<text
x="100" y="150"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="20px"
fill="#000000"
stroke="none">
<tspan x="100" dy="-1.2em">&#128064; CONFIRM</tspan>
<tspan x="100" dy="1.2em">previous conditions</tspan>
<tspan x="100" dy="1.2em">at this structure</tspan>

</text>

<text
x="300" y="150"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="20px"
fill="#000000"
stroke="none">
<tspan x="300" dy="-1.2em">&#10133; ADD NEW</tspan>
<tspan x="300" dy="1.2em">condition at</tspan>
<tspan x="300" dy="1.2em">this structure</tspan>
</text>

<text
x="200" y="250"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="20px"
fill="#000000"
stroke="none">
<tspan x="200" dy="-0.6em">&#127937; DONE</tspan>
<tspan x="200" dy="1.2em">with this structure inspection</tspan>

</text>

<text
x="50" y="350"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="18px"
fill="#000000"
stroke="none">
<tspan x="50" dy="-1.2em">&#127760;</tspan>
<tspan x="50" dy="1.2em">Map</tspan>
<tspan x="50" dy="1.2em">Note</tspan>
</text>

<text
x="150" y="350"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="18px"
fill="#000000"
stroke="none">
<tspan x="150" dy="-1.2em">&#128190;</tspan>
<tspan x="150" dy="1.2em">Data</tspan>
<tspan x="150" dy="1.2em">Issue</tspan>
</text>

<text
x="250" y="350"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="18px"
fill="#000000"
stroke="none">
<tspan x="250" dy="-1.2em">&#128589;</tspan>
<tspan x="250" dy="1.2em">Property</tspan>
<tspan x="250" dy="1.2em">/Owner</tspan>
</text>

<text
x="350" y="350"
dominant-baseline="central"
text-anchor="middle"
font-family="sans-serif"
font-weight="bold"
font-size="18px"
fill="#000000"
stroke="none">
<tspan x="350" dy="-1.2em">&#128664;</tspan>
<tspan x="350" dy="1.2em">Access</tspan>
<tspan x="350" dy="1.2em">Road</tspan>
</text>

</svg>

0 Kudos
Jing_Sun
Esri Contributor

Hi Jim,

I had the same issue and what I've done was to convert the texts to graphics so that all fonts and formatting are locked.

In Adobe Illustrator, select the texts and click [Type] > [Create Outlines] (Shift + Ctrl + O). 

I am sure the other open source programs also have a similar workflow.

The idea is to convert text to graphic, so make sure saving a copy for future editing before converting the text. 

Cheers,

Sun

0 Kudos