Al definir la apariencia de una pregunta de selección única o múltiple como image-map, la pregunta se presentará como una imagen con regiones seleccionables de la imagen como opciones. Esta apariencia necesita que se proporcione un archivo SVG en la carpeta de contenido multimedia de la encuesta y que los valores de nombre de la lista de opciones coincidan con los Id. de ruta de las regiones del archivo SVG. El nombre exacto del archivo de imagen (incluida la extensión .svg) se debe introducir en la columna media::image de la hoja de cálculo de la encuesta.
Nota:
image-map no se admite en la aplicación web Survey123.
Gráficos vectoriales escalables (SVG) es un lenguaje basado en XML para gráficos vectoriales 2D. Puede crear su propia imagen SVG con un editor de gráficos vectoriales o con un editor de texto. También dispone de varios sitios web que ofrecen archivos SVG y herramientas gratuitos para convertir imágenes ráster a formato SVG. Un archivo SVG puede contener una o varias imágenes ráster en segundo plano.
Puede modificar un archivo SVG en un editor de texto. El siguiente ejemplo muestra un archivo SVG sencillo que representa direcciones de una brújula. Observe los Id. de ruta de cada región.<svg
xmlns="http://www.w3.org/2000/svg"
height="180"
width="180">
<g style="fill:#A9A9A9">
<path id="North" d="M 75,75 90,0 105,75 Z"/>
<path id="South" d="m 75,105 15,75 15,-75 Z"/>
<path id="West" d="M 75,75 0,90 75,105 Z"/>
<path id="East" d="m 105,75 75,15 -75,15 Z"/>
</g>
</svg>
Requisitos mínimos para archivos SVG
A continuación, se muestran los requisitos mínimos para un archivo SVG que se puede utilizar con image-map en Survey123:
- Debe contener al menos un elemento <path> con un valor id. No es posible utilizar elementos tales como <rect>, <ellipse>, <circle>, <image> ni <text> como opciones de selección. No es posible utilizar un elemento <path> como opción de selección si no tiene ningún valor id.
- No puede contener grupos vacíos. Los grupos se encierran entre las etiquetas <g> y </g>. Si su archivo SVG contiene uno o varios grupos vacíos, no podrá seleccionar ninguna región de la imagen.
- Solo puede tener un grupo por nivel anidado. Su archivo SVG puede tener varios niveles anidados. Sin embargo, si un nivel contiene más de un grupo, no podrá seleccionar ningún elemento <path>.
- Se requieren una altura y anchura definidas (visor). Si su archivo SVG no tiene ningún visor, es posible que las regiones seleccionables se desplacen respecto de la imagen subyacente.
- Puede incluir un atributo viewBox opcional si coincide con el visor. Si el atributo viewBox difiere de sus valores de altura y anchura, las regiones seleccionables estarán desplazadas respecto de la imagen subyacente.