Hi,
I am attempting to create a custom clickable SVG file for a survey and am having issues. As a test I have created an image with two colour blocks in adobe AI. I have enabled compound paths and called them 'yellow' and 'red'. Below is the code and I have attached screenshots of the file in AI.
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 27.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<svg version="1.1" id="RY" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="0 0 450 100" style="enable-background:new 0 0 450 100;" xml:space="preserve">
<style type="text/css">
.st0{fill:#ED1C24;stroke:#000000;stroke-miterlimit:10;}
.st1{fill:#FFF200;stroke:#000000;stroke-miterlimit:10;}
</style>
<g id="colours">
<path id="red" class="st0" d="M216.09,100H0V0h216.09V100z"/>
<path id="yellow" class="st1" d="M216.09,0H450v100H216.09V0z"/>
</g>
</svg>
It is set up in Survey123 Connect as a 'select_one ry' and with the appearance 'image-map'. The choices are 'red' and 'yellow'.
The survey shows the image and allows me to click however it does not sumbit a value so I assume there is something wrong with my ID or how I set it up in AI? Does anyone have any advice on what I am missing in this process?
Thanks!
