Создание SVG схемы зала

Для создание интерактивной схемы зала рекомендуется использовать редактор Inkscape, со следующими допущениями:

1. Размер схемы должен составлять 400х400px

2. Для обрисовки секторов используется инструмент "Draw Bezier curves and straight lines"

3. Для упрощения дальнейшей обработки схемы каждому сектору необходимо прописать название в атрибут "title"

4. Далее сохраненный svg файл необходимо отредактировать

Заголовок файла заменить на следующий код:

<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<svg
    xmlns="http://www.w3.org/2000/svg"
    xmlns:xlink="http://www.w3.org/1999/xlink"
    xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
    version="1.1" width="350" height="350" viewBox="0 0 390 390">
<g id="viewport">

Окончание файла заменить на следующий код:

</g>
</svg>

Созданный сектор примерно будет отображение в файле следующим образом:

<path
  style="fill:none;fill-rule:evenodd;stroke:#000000;stroke-width:1px;stroke-linecap:butt;
      stroke-linejoin:miter;stroke-opacity:1"
  d="m 281.07094,172.25274 17.17069,44.90795 -21.13315,7.92493 -21.92565,6.07578
      -24.03896,4.4908 -32.49223,3.43413 -30.90723,-1.05665 -33.02056,-4.22663
      -25.88811,-6.33995 -28.793921,-9.77408 17.699017,-45.70045 24.567294,9.77409
      25.09562,7.13243 27.20893,4.4908 39.62466,-1.58499 35.39804,-8.18909 z"
  id="path3604"
  inkscape:connector-curvature="0">
  <title
     id="title3606">Амфитеатр</title>
</path>

Его необходимо преобразовать в следующий вид:

<path data-id="s**ID**" d="M 63.509433,144.39057 127.01886,109.08679 117.67924,73.783018 42.588679,113.38302 Z" />

где ID - идентификатор сектора (отображается в карточке сектора)

Текстовые надписи можно не преобразовывать, но ради уменьшения размера схемы можно преобразовать по тому же принципу как и сектор. Надпись будет представлена примерно следующим кодом:

  <text
     xml:space="preserve"
     style="font-style:normal;font-weight:normal;font-size:40px;line-height:125%;
         font-family:sans-serif;letter-spacing:0px;word-spacing:0px;fill:#000000;
         fill-opacity:1;stroke:none;stroke-width:1px;stroke-linecap:butt;
         stroke-linejoin:miter;stroke-opacity:1"
     x="137.36549"
     y="217.42487"
     id="text3608"
     sodipodi:linespacing="125%"><tspan
       sodipodi:role="line"
       id="tspan3610"
       x="137.36549"
       y="217.42487"
       style="font-size:17.5px">Амфитеатр</tspan></text>

Его можно преобразовать в следующий вид:

<text x="14.751657" y="164.08112" style="font-size:13px">Амфитеатр</text>

5. Файл можно сохранить и загрузить в карточку версии зала. Схема готова.

Важно обратить внимание, что интерактивная схема зала отображается только, при варианте отображении версии зала "Список секторов".