Работа с файлами SVG

Настроив оформление для вопросов типа Выбрать один и Выбрать несколько как изображение-карту, можно отобразить вопрос как изображение с возможностью выбора регионов. Для работы этого оформления требуется, чтобы в медиа-папке опроса был файл SVG, а значения имен в списке выбора соответствовали идентификаторам пути для областей файла SVG. Точное имя файла изображения (включая расширение .svg) необходимо ввести в столбце media::image рабочего листа опроса.

Оформление карты-изображения при выборе одного варианта
Примечание:

image-map не поддерживается в веб-приложении Survey123.

Scalable Vector Graphics (SVG) - это язык на базе XML для 2D векторной графики. Вы можете создать собственное изображение SVG, используя редактор векторной графики или текстовой редактор. Также имеется множество веб-сайтов, предлагающих бесплатные файлы SVG и инструменты для конвертации растровых изображений в формат SVG. Файл SVG может содержать в фоне одно или несколько растровых изображений.

Файл SVG можно отредактировать в текстовом редакторе. В следующем примере показан простой файл SVG с компасными направлениями. Обратите внимание на ID пути в каждом регионе.

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

Минимальные требования к файлам SVG

Ниже приведены минимальные требования к файлам SVG, которые могут использоваться для image-map в Survey123:

  • Файл должен содержать как минимум один элемент <path>, имеющий значение id. Другие элементы, такие как <rect>, <ellipse>, <circle>, <image> и <text> не могут использоваться для выборки. Элемент <path> не может использоваться для выборки, если он не содержит значения id.
  • Файл не может содержать пустых групп. Группы задаются тегами <g> и </g>. Если файл SVG содержит одну или более пустых групп, ни один из регионов не может быть выбран.
  • Необходимо, чтобы на каждом уровне вложенности была только одна группа. Файл SVG может содержать несколько уровней вложенности. Однако если уровень содержит более одной группы, ни один из элементов <path> не может быть выбираемым.
  • Необходимо задание высоты и ширины (области просмотра). Если файл SVG не имеет области просмотра, выбираемые области могут оказаться в стороне от фонового изображения.
  • Файл может содержать дополнительный атрибут viewBox, если он соответствует области просмотра. Если атрибут viewBox отличается от значений высоты и ширины, выбираемые области будут смещены относительно фонового изображения.