単一の選択肢または複数の選択肢の質問の表示設定を image-map に設定すると、質問が画像として表示され、画像の選択可能な領域が選択肢になります。 この表示設定では、SVG ファイルを調査のメディア フォルダーで指定し、選択肢リストの名前の値が SVG ファイルの地域のパス ID と一致する必要があります。 画像ファイルの正確なファイル名 (.svg 拡張子を含む) を survey ワークシートの [media::image] 列に入力する必要があります。
注意:
[image-map] は、Survey123 Web アプリではサポートされていません。
スケーラブル ベクター グラフィックス (SVG) は、2D ベクター グラフィックス用の XML ベースの言語です。 ベクター グラフィックス エディターまたはテキスト エディターを使用して、独自の SVG 画像を作成できます。 また、多くの Web サイトで無料の SVG ファイルやラスター画像を SVG 形式に変換するためのツールが提供されています。 SVG ファイルは、背景に 1 つまたは複数のラスター画像を含めることができます。
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 ファイルの最小要件
Survey123 の [image-map] で使用できる SVG ファイルの最小要件を次に示します。
- id 値を持つ <path> エレメントが少なくとも 1 つ含まれている必要があります。 <rect>、<ellipse>、<circle>、<image>、<text> などの他のエレメントは、選択肢の選択に使用できません。 <path> エレメントは、id 値を持たない場合は、選択肢の選択に使用できません。
- 空のグループを含めることはできません。 グループは、<g> と </g> のタグで囲む必要があります。 SVG ファイルに 1 つまたは複数の空のグループが含まれる場合、画像の地域は選択できなくなります。
- ネスト レベルあたり 1 つのグループのみを持つことができます。 SVG ファイルは、多くのネストされたレベルを持つことができます。 ただし、あるレベルに複数のグループが含まれている場合、<path> エレメントは選択できなくなります。
- 定義された高さと幅 (ビューポート) を持つ必要があります。 SVG ファイルにビューポートがない場合、選択可能な地域は、元の画像からのオフセットになります。
- ビューポートと一致する場合、オプションの viewBox 高度を含めることができます。 viewBox 高度が高さと幅の値と異なる場合、選択可能な地域は元の画像からのオフセットになります。