Need help with svg map customization

User Support Form Building
1

Hi, everyone.

I’ve created the image-map below, which has an embedded png basemap and a clickable, semi-transparent set of zones in svg format. When I upload to KoboToolbox, however, the zones are completely opaque and black, rather than grey. I know how to modify the color of the zones using the appropriate six-digit hex code. And, in principle, I know that I can make the zones semi-transparent using image-customization. However, I have not found a practical (similar) example and would appreciate some guidance.

Greenpoint
Greenpoint3600×2550 752 KB

2

Perhaps have a look at this - it seems like a similar usecase to yours: a clickable select-one SVG ‘map’ with custom coloring/shading.

Screenshot 2025-11-28 at 9.15.56 AM
Screenshot 2025-11-28 at 9.15.56 AM714×849 37 KB

ternary_select.xlsx (7.1 KB)

This is the associated triangle.svg [Discourse wont let me upload an svg file, so I pasted the contents here instead]

<svg viewBox="0 -20 500 480" width="500" height="433" xmlns="http://www.w3.org/2000/svg">
  <g stroke="black" fill="white" stroke-width="1">
    <!-- ROW 1 TOP -->
    <path id="100 0 0" fill="#FF0000" d="M250,0 200,86.6 300,86.6 250,0z"/>
    
    <!-- ROW 2 -->
    <path id="75 0 25" fill="#FF0088" d="M200,86.6 150,173.2 250,173.2z"/>
    <path id="80 10 10" fill="#FF4444" d="M250,173.2 200,86.6 300,86.6z"/>
    <path id="75 25 0" fill="#FF8800" d="M300,86.6 250,173.2 350,173.2z"/>

    <!-- ROW 3 -->
    <path id="50 0 50" fill="#FF00FF" d="M150,173.2 100,259.8 200,259.8z"/>
    <path id="60 10 30" fill="#FF44AA" d="M200,259.8 150,173.2 250,173.2z"/>
    <path id="50 25 25" fill="#FF8888" d="M250,173.2 200,259.8 300,259.8z"/>
    <path id="60 30 10" fill="#FFAA44" d="M300,259.8 250,173.2 350,173.2z"/>
    <path id="50 50 0" fill="#FFFF00" d="M350,173.2 300,259.8 400,259.8z"/>

    <!-- ROW 4 -->
    <path id="25 0 75" fill="#8800FF" d="M100,259.8 50,346.4 150,346.4z"/>
    <path id="30 10 60" fill="#AA44FF" d="M150,346.4 100,259.8 200,259.8z"/>
    <path id="25 25 50" fill="#8888FF" d="M200,259.8 150,346.4 250,346.4z"/>
    <path id="33 34 33" fill="#AAAAAA" d="M250,346.4 200,259.8 300,259.8z"/>
    <path id="25 50 25" fill="#88FF88" d="M300,259.8 250,346.4 350,346.4z"/>
    <path id="30 60 10" fill="#AAFF44" d="M350,346.4 300,259.8 400,259.8z"/>
    <path id="25 75 0" fill="#88FF00" d="M400,259.8 350,346.4 450,346.4z"/>

    <!-- ROW 5 BOTTOM -->
    <path id="0 0 100" fill="#0000FF" d="M50,346.4 0,433 100,433z"/>
    <path id="10 10 80" fill="#4444FF" d="M100,433 50,346.4 150,346.4z"/>
    <path id="0 25 75" fill="#0088FF" d="M150,346.4 100,433 200,433z"/>
    <path id="10 30 60" fill="#44AAFF" d="M200,433 150,346.4 250,346.4z"/>
    <path id="0 50 50" fill="#00FFFF" d="M250,346.4 200,433 300,433z"/>
    <path id="10 60 30" fill="#44FFAA" d="M300,433 250,346.4 350,346.4z"/>
    <path id="0 75 25" fill="#00FF88" d="M350,346.4 300,433 400,433z"/>
    <path id="10 80 10" fill="#44FF44" d="M400,433 350,346.4 450,346.4z"/>
    <path id="0 100 0" fill="#00FF00" d="M450,346.4 400,433 500,433z"/>

    <g stroke="none" fill="black" font-family="monospace" font-size="1.5em" pointer-events="none">
      <!-- TOP CENTER CORNER LABEL (RED) -->
      <text x="250" y="-2" text-anchor="middle" dominant-baseline="auto">
        Love
      </text>

      <!-- BOTTOM LEFT CORNER LABEL (BLUE) -->
      <text x="0" y="435" text-anchor="start" dominant-baseline="hanging">
	Fame
      </text>

      <!-- BOTTOM RIGHT CORNER LABEL (GREEN) -->
      <text x="500" y="435" text-anchor="end" dominant-baseline="hanging">
  	Money
      </text>
    </g>
  </g>
</svg>

My particular application was a ternary selection widget, but the underlying SVG ‘map’, polygon colors, matching the XLSForm choice names to SVG ids, etc should all be similar to what you are trying to accomplish.

Hope it helps. :slightly_smiling_face:

1 Like
3

Thanks, @Xiphware. I’ll take a look.