image-map, SVG and text...

JimPugh2 — Wed, 11 Dec 2019 15:01:44 GMT

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:

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:

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

Any help or suggestions are welcome!

Re: image-map, SVG and text...

BrettStokes — Thu, 12 Dec 2019 01:24:37 GMT

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

Re: image-map, SVG and text...

JimPugh2 — Thu, 12 Dec 2019 15:43:54 GMT

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">

<path
d="M 0,0 200,0 200,100 0,100 Z"
id="itis_surv_skip_btn" />

<path
d="M 200,0 400,0 400,100 200,100 Z"
id="itis_surv_no_cond_btn" />

<path
d="M 0,100 200,100 200,200 0,200 Z"
id="itis_surv_conf_prev_btn" />

<path
d="M 200,100 400,100 400,200 200,200 Z"
id="itis_surv_add_cond_btn" />

<path
d="M 0,200 400,200 400,300 0,300 Z"
id="itis_surv_done_btn" />

<path
d="M 0,300 100,300 100,400 0,400 Z"
id="fc79475f525149c7a35b63dbb1395a65" />

<path
d="M 100,300 200,300 200,400 100,400 Z"
id="5bee7f32daed4e53a7444547276b4356" />

<path
d="M 200,300 300,300 300,400 200,400 Z"
id="26fca656defe49788b41c9a2b6f44da2" />

<path
d="M 300,300 400,300 400,400 300,400 Z"
id="itis_surv_accs_road_btn" />

</g>

<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">↷ 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">✅ 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">👀 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">➕ 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">🏁 DONE</tspan>
<tspan x="200" dy="1.2em">with this structure inspection</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">💾</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">🙍</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">🚘</tspan>
<tspan x="350" dy="1.2em">Access</tspan>
<tspan x="350" dy="1.2em">Road</tspan>
</text>

</svg>

Re: image-map, SVG and text...

Jing_Sun — Fri, 13 Dec 2019 07:42:04 GMT

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

topic image-map, SVG and <tspan> text... in ArcGIS Survey123 Questions

image-map, SVG and text...

Re: image-map, SVG and text...

Re: image-map, SVG and text...

Re: image-map, SVG and text...