Функция "drag ()" - предоставляет стандартный алгоритм для перемещения объектов, однако она может быть измененная по усмотрению разработчика, путем переопределения трех функций: начало передвижения, передвижение и окончание передвижения. Названия у них могут быть различными, главное, что их необходимо передать как параметры в функцию "drag" в правильном порядке. Прежде всего, для того, чтобы у объектов текста и прямоугольника была ссылка друг на друга, при создании объекта, определим для них атрибуты "pair": прямоугольник имеет значением атрибута текст, а текст - прямоугольник. Таким образом, два объекта будут связаны друг с другом.

Для того, чтобы пользователю было видно, что фигура выделена и ее можно перетаскивать по холсту, выделим ее с помощью затемнения. Это действие производится в функции "preMoving", которая определяет действия, выполняемые над объектом при начале движения. После этого, необходимо вычислить начальные координаты фигуры. Ввиду того, что объектом может быть не только прямоугольник, но и эллипс, необходимо сделать проверку на тип фигуры, т.к. координаты разного типа фигур задаются по-разному. Вне зависимости от того, на какую из фигур попал пользователь (текст или прямоугольник), благодаря ассоциативной связке посредством атрибута "pair" возможно вычислить координаты парного элемента. На этом задачи функции заканчиваются. Функция "move" определяет порядок движения для пары фигур. Фактически, она меняет координаты x и y от ранее определенных в первой функции, в зависимости от передвижения. Функция "postMoving" убирает выделение объекта (затемнение), которое было сделано на первом шаге.

Разработанные функции передвижения будут актуальны для всех подобных типов фигур - пар объектов фигура-текст, даже если текст не будет помещен внутри.

Для определения уникального внешнего вида объектов был создан класс Design, определяющий их внешний вид.

При создании нового объекта необходимо указать его цвет, цвет и размер текста в нем и вид курсора мыши при наведении на объект.

Таким образом было выделено два объекта - "Lookup" и "Token". Их графическое представление проиллюстрировано на рисунке 3.1:

Рисунок 3.1 Графическое представление объектов "Token" и "Lookup"

Для отображения начала и окончания диаграммы было решено сделать отличающиеся фигуры - эллипсы. При чем, Начало будет обозначено синим цветом, а выходы - зеленым и красным в соответствии с тем, желательный этот выход или нет (см. пункт 2.2). Графическое представление этих объектов представлено на рисунке 3.2:

Рисунок 3.2 Графическое представление начала и окончания выражения правила шаблона

3.3 Реализация алгоритма соединения объектов линией

Для того, чтобы строить диаграммы в соответствии с рисунком 2.7, необходимо реализовать алгоритм соединения двух объектов линией. Для отображения линии на svg холсте, необходимо задать две точки - первая и вторая фигура. Для этого на этапе проектирования у объекта "Path" было определено два атрибута "obj1" и "obj2". Прорисовать линию между ними не составляет сложности, однако, обе этих фигуры динамические, а это значит, что при перемещении одной из них вторая координата (вторая точка) будет изменяться вместе с координатами фигуры. В связи с этим, прорисовку линии необходимо обновлять в функции "move", определенной в пункте 3.2.

Для того чтобы линии корректно отображались, необходимо выбрать две наиболее удачные точки на поверхности первого и второго объекта. Для этого была реализована функция "connection". На вход ей передается два объекта. Прежде всего, определяются координаты этих объектов. После этого, на поверхности каждого определяются четыре точки - середины сторон объекта. После этого вычисляется наименьшее расстояние между одной из точек первого объекта и второго и только после этого прорисовывается линия. Реализацию (программный код) данной функции и окончательный вариант трех функций для перемещения представлен в приложении В.

3.4 Реализация основных функций веб-редактора

Функция создания новой диаграммы осуществляется при нажатии на кнопку "Новая диаграмма" в левом верхнем углу экрана. Открывается модульное окно, где пользователю необходимо ввести обязательные для описания лексико-семантического шаблона параметры: название фазы, название правила и приоритет правила. При нажатии на кнопку "создать" генерируется пустой лист, куда пользователь сможет создавать новые объекты. На рисунке 3.4 показано модальное окно создания новой диаграммы.

Рисунок 3.4 Создание новой диаграммы в веб-приложении

При создании объектов на диаграмме, если они имеют параметры, задаваемые пользователем, используется подобный подход: в модульное окно пользователь вводит необходимые данные для создания объекта, после чего объект появляется на холсте диаграммы. Если какие-либо из обязательных данных не были введены, объект не будет создан и пользователем будет получено предупреждение о необходимости заполнения полей ввода.

Сохранение диаграммы будет производиться двумя способами: локально, на компьютер пользователя, что позволит работать с редактором автономно при сбоях на сервере, и в облачное хранилище. Для обеспечения автономности работы, файл будет сохранен в формате. xml. Однако для того, чтобы разработанные диаграммы могли быть использованы при дальнейшей работе пользователя с системой SFTA, которая позволит с помощью лексико-семантического шаблона провести анализ текста, они должны быть сохранены в формате. jape. Поэтому, все файлы, попадающие в облачное хранилище, будут проходить преобразование из XML представления в язык JAPE. Данная особенность так же позволит сделать модуль веб-редактора для описания лексико-семантических шаблонов автономным от общей системы, а значит, при необходимости внесения в него изменений, изменения в общей системе будут минимальны или их не будет вообще. Для реализации функции сохранения файлов на локальный компьютер пользователя была использована библиотека Raphael. js, которая позволяет преобразовать <svg> холст в строку формата xml.

В связи с тем, что функция сохранения реализована для двух форматов файлов, импорт диаграмм будет производиться по той же схеме. Если диаграмма будет импортироваться с локального компьютера, то практически сразу будет отображена на холсте. Если же будет проводиться импорт лексико-семантического шаблона из облачного хранилища, необходимо выполнить преобразование языка JAPE в. xml формат и только после этого, отобразить полученную диаграмму на холсте.

На рисунке 2.6 представлен пример лексико-семантического шаблона, который аннотирует все заголовки, не начинающиеся с буквы S или s меткой "TitleWithoutS" (взят из руководства пользователя с официального сайта платформы GATE). На рисунке 3.3 проиллюстрировано графическое представление данного шаблона. Диаграмма выполнена в разработанном редакторе. В результате сохранения диаграммы будет получен файл, который представлен в приложении Г.

Рисунок 3.3 Лексико-семантический шаблон, разработанный с помощью веб-редактора

3.5 Выводы по результатам реализации редактора

В ходе исследования был разработан веб-редактор для визуального языка в соответствии с требованиями, выделенными в главе 2, по результатам опроса конечных пользователей и обзору существующих решений. В соответствии с визуальными представлениями, спроектированными под пунктом 2.2., используя инструмент генерации графики SVG и библиотеку Raphael JS, были разработаны графические объекты диаграммы, основанные на конструкциях языка JAPE.

После этого, был реализован алгоритм связывания объектов посредством объекта "path", который предполагает, что у каждой фигуры есть четыре координаты для возможного размещения линии. После подсчета дистанций между наиболее вероятными из них для связывания, выбирается наименьшее расстояние между двумя координатами от разных фигур, где и прорисовывается линия. Данный алгоритм позволяет располагать линии относительно графических объектов наиболее удачно для отображения. Для полного функционирования редактора, были реализованы его основные функции: создание новой диаграммы, сохранение ее на локальном компьютере и импорт диаграммы с локального компьютера в формате. xml.

Заключение

В ходе работы были достигнуты следующие результаты:

1. Проведен обзор платформы GATE и языка для описания лексико-семантических шаблонов JAPE. Выявлена грамматика языка, изучены принципы составления шаблонов. В соответствии с грамматикой спроектированы визуальные представления конструкций языка JAPE. На первом этапе, были выбраны наиболее часто используемые элементы грамматики.

2. Рассмотрены существующие доступные средства для описания шаблонов на языке JAPE ("Eclipse" и "Vim"). Однако ни один из этих редакторов не ориентирован на язык JAPE. Рассмотрены веб-редакторы для создания диаграмм, предоставляющих возможность генерации кода ("WWW SQL Designer" и "CodeUML") и для визуальных языков ("Scratch" и "Pencilcode"), которые были разработаны для начинающих пользователей. По итогам обзора были выделены требования к разрабатываемому веб-редактору.

3. В качестве платформы для разработки была выбрана Java, для разработки клиентской части приложения - HTML5, JavaScript и язык описания стилей CSS. Для разработки были использованы бесплатные инструменты - сред разработки Eclipse и сервер Tomcat. В качестве средства для визуализации конструкций выбран SVG. Raphael. js - библиотека для SVG, была выбрана, т.к. осуществляет поддержку генерации XML кода на большинстве браузеров, включая старые версии и позволяет более эффективно использовать JavaScript для рисования.

4. Для разработки интерпретатора был выбран язык преобразования текста в формате XML - XSLT. Разработаны шаблоны для излечения информативных атрибутов из графических объектов.

5. Выделенные функциональные требования для веб-редактора смоделированы с помощью нотации UML.

6. Разработан прототип веб-редактора для описания лексико-семантических шаблонов на визуальном языке. В нем реализованы функции создания объектов, их модификации. А так же создание новой диаграммы, ее сохранение на локальном компьютере в виде файла в формате. xml и импорт существующей диаграммы с локального компьютера.

Результаты исследования были опубликованы в сборнике докладов всероссийской научно-практической конференции молодых ученых с международным участием "Математика и междисциплинарные исследования - 2016", в блоке "Искусственный интеллект и прикладная лингвистика".

Дальнейшая разработка будет направлена на расширение функциональности веб-редактора, добавление функций импорта уже созданной диаграммы (на языке XML), добавление новых объектов для создания более сложных лексико-семантических шаблонов. Так же, на серверной части приложения будет создан модуль клиента веб-сервиса, который позволит сохранять диаграммы в облачном хранилище для дальнейшего использования при анализе текста системой SFTA. Для этих же целей будет добавлен модуль генерации кода из XML представления в текстовое представление языка JAPE и обратно.

Список сокращений и условных обозначений

DOM - Document Object Model

ООП - объектно-ориентированное программирование

GATE - General Architecture of Text Engineering

JAPE - Java Annotation Patterns Engine

SFTA - System for Text Analysis

SVG - Scalable Vector Graphics

XSLT - eXtensible Stylesheet Language Transformations

Библиографический список

1. "АОТ" - Автоматическая Обработка Текста [Электронный ресурс] URL: http://www.aot.ru/ (дата обращения 15.05.2016).

2. WordSmith Tools - Windows software for finding word patterns // Lexical Analysis Software. 2015. URL: http://www.lexically.net/wordsmith/ (дата обращения 15.05.2016).

3. AntConc // Laurence Anthony's Website. URL: http://www.laurenceanthony.net/software/antconc/ (дата обращения 15.05.2016).

4. GATE - General Architecture for Text Engineering. URL: https: // gate. ac. uk (дата обращения 15.05.2016).

5. JAPE: Regular Expressions over Annotations // GATE - General Architecture for Text Engineering. URL: https: // gate. ac. uk/sale/tao/splitch8.html (дата обращения 21.05.2016).

6. WWW SQL Designer [Электронный ресурс] URL: http://ondras. zarovi. cz/sql/demo (дата обращения 21.05.2016).

7. CodeUML [Электронный ресурс] URL: http://www.codeuml.com/ (дата обращения 21.05.2016).

8. Pencil Code Online Guide [Электронный ресурс] URL: https: // guide. pencilcode.net/ (дата обращения 21.05.2016).

9. Scratch [Электронный ресурс] URL: https: // scratch. mit.edu/ (дата обращения 21.05.2016).

10. About Vim // Vim. URL: http://www.vim.org/about. php (дата обращения 21.05.2016).

11. Eclipsepedia // Eclipse. URL: https: // wiki. eclipse.org/Main_Page (дата обращения 21.05.2016).

12. Хабибуллин И.Ш. Java 7. СПб.: БХВ-Петербург, 2012.768 c.: ил. - (В подлиннике) ISBN 978-5-9775-0735-6.

13. Fulton S., Fulton J.html5 Canvas. - O'Reilly Media, Inc. - Sebastopol., 2011.

14. Scalable Vector Graphics (SVG) // World Wide Web Consortium (W3C). URL: https: // www.w3.org/Graphics/SVG/ (дата обращения 25.05.2016).

15. Aurora S. The 10 Best JavaScript Libraries for SVG Animation // Noeticforce URL: http://noeticforce.com/Javascript-libraries-for-svg-animation (дата обращения 25.05.2016).

16. Raphael js [Электронный ресурс] URL: http://raphaeljs.com (дата обращения 22.04.2016).

17. TIOBE Index for May 2016 // TIOBE. The Software Quality Company. URL: http://www.tiobe.com/tiobe_index (дата обращения 26.05.2016).

18. Transforming XML Data with XSLT // Oracle. Integrated Cloud Applications and Platform Services. URL: https: // docs. oracle.com/javase/tutorial/jaxp/xslt/transformingXML.html (дата обращения 26.04.2016).

19. Бармина Е.И., Бушуев Р.Н., Котельникова Н.В., Ланин В.В., Плотникова О.А. Система для обработки корпусов текстов // Математика и междисциплинарные исследования - 2016/под ред. Ю.А. Шарапова [и др.]. - Пермь. - 2016. - С.245-250.

Приложение А. Грамматика языка JAPE

Приложение Б. Диаграмма классов клиента

Приложение В. Функции соединения и перемещения объектов

connection = function (obj1, obj2, line, bg) { // соединить две фигуры линией

/*obj1 - объект, от которого начинается линия*/

/*obj2 - объект, к которому тянется линия*/

/* line - передается, если линия между объектами уже существует для ее перерисовки

при передвижении объектов по холсту*/

/* bg - цвет линии*/ if (obj1. line && obj1. from && obj1. to) { line = obj1;

obj1 = line. from;

obj2 = line. to;

} var bb1 = obj1. getBBox (), bb2 = obj2. getBBox (),

/* p - набор точек, доступных для рисования одного из концов линии. P [0.3] - точки на первой фигуре, p [4.7] - на второй*/ points = [{x: bb1. x + bb1. width / 2, y: bb1. y - 1}, {x: bb1. x + bb1. width / 2, y: bb1. y + bb1. height + 1}, {x: bb1. x - 1, y: bb1. y + bb1. height / 2}, {x: bb1. x + bb1. width + 1, y: bb1. y + bb1. height / 2}, {x: bb2. x + bb2. width / 2, y: bb2. y - 1}, {x: bb2. x + bb2. width / 2, y: bb2. y + bb2. height + 1}, {x: bb2. x - 1, y: bb2. y + bb2. height / 2}, {x: bb2. x + bb2. width + 1, y: bb2. y + bb2. height / 2}], dist_points = {}, // набор номеров точек, для которых посчитана дистанция

distances = []; /*набор дистанций между двумя точками с одной и второй фигуры*/

// i-ый элемент массива d соответствует двум точкам для которых посчитана дистанция в массиве dis под тем же индексом for (var i = 0; i < 4; i++) { for (var j = 4; j < 8; j++) { var dx = Math. abs (points [i]. x - points [j]. x), dy = Math. abs (points [i]. y - points [j]. y);

if ( (i == j - 4) || ( ( (i! = 3 && j! = 6) || points [i]. x < points [j]. x)

&& ( (i! = 2 && j! = 7) || points [i]. x > points [j]. x) && ( (i! = 0

&& j! = 5) || points [i]. y > points [j]. y) && ( (i! = 1 && j! = 4)

|| points [i]. y < points [j]. y))) { distances. push (dx + dy);

dist_points [distances [distances. length - 1]] = [i, j];

} } }

var result_points;

if (distances. length == 0) // если линия проведена от фигуры к самой себе result_points = [0, 4]; // линия из точки в себя же else resulted_points = dist_points [Math. min. apply (Math, distances)]; /*ищем две

точки между которыми минимальная дистанция и помещаем в res*/ var x1 = points [res [0]]. x, y1 = points [res [0]]. y, x4 = points [res [1]]. x, y4 = points [res [1]]. y; // кординаты для линии dx = Math. max (Math. abs (x1 - x4) / 2,10);

dy = Math. max (Math. abs (y1 - y4) / 2,10);

var x2 = [x1, x1, x1 - dx, x1 + dx] [result_points [0]]. toFixed (3), y2 = [y1 - dy, y1 + dy, y1, y1] [result_points [0]]. toFixed (3), x3 = [0, 0, 0, 0, x4, x4, x4 - dx, x4 + dx] [result_points [1]]. toFixed (3), y3 = [0, 0, 0, 0, y1 + dy, y1 - dy, y4, y4] [result_points [1]]. toFixed (3);

var path = ["M", x1. toFixed (3), y1. toFixed (3), "C", x2, y2, x3, y3,x4. toFixed (3), y4. toFixed (3)]. join (",");

if (line && line. line) { line. bg && line. bg. attr ({path: path});

line. line. attr ({path: path});

} else { var color = typeof line == "string"? line: "#000";

return { bg: bg && bg. split && this. path (path). attr ({stroke: bg. split ("|") [0],

fill: "none", "stroke-width": bg. split ("|") [1] || 3}), line: this. path (path). attr ({stroke: color, fill: "none", 'stroke-

width': 2}), from: obj1, to: obj2 };

} };

var preMoving = function () { // подготовка к перемещению фигуры // извлечение начальных координат фигуры this. ox = this. type == "ellipse"? this. attr ("cx"): this. attr ("x");

this. oy = this. type == "ellipse"? this. attr ("cy"): this. attr ("y");

if (this. type! = "text") this. animate ({"fill-opacity":.2}, 500);

/* извлечение начальных координат для группы фигур (фигура+текст внутри

нее) */ this. pair. ox = this. pair. type == "ellipse"? this. pair. attr ("cx"):

this. pair. attr ("x");

this. pair. oy = this. pair. type == "ellipse"? this. pair. attr ("cy"):

this. pair. attr ("y");

/*выделение перемещаемой фигуры*/ if (this. pair. type! = "text") this. pair. animate ({"fill-opacity":.2},

500);

};

var move = function (dx, dy) { // перемещение фигуры // перемещение для фигуры var att = this. type == "ellipse"? {cx: this. ox + dx, cy: this. oy + dy}:

{x: this. ox + dx, y: this. oy + dy};

this. attr (att);

// перемещение для текста att = this. pair. type == "ellipse"? {cx: this. pair. ox + dx, cy:

this. pair. oy + dy}:

{x: this. pair. ox + dx, y: this. pair. oy + dy};

this. pair. attr (att);

// перемещение соединительной линии for (var i = connections. length; i--;) { r. connection (connections [i]);

} };

var preMoving =postMoving = function () { // завершение перемещения фигуры

/*отмена выделения перемещаемой фигуры*/ if (this. type! = "text") this. animate ({"fill-opacity": 0}, 500);

if (this. pair. type! = "text") this. pair. animate ({"fill-opacity": 0}, 500);

};

Приложение Г. Функции соединения и перемещения объектов

<div id="svgout" priority="5" phase="g" rule="g" onclick="getEventElement ()">

<svg xmlns="http://www.w3.org/2000/svg"

xmlns: xlink="http://www.w3.org/1999/xlink" height="760" version="1.1"

width="1000" style="overflow: hidden; position: relative; ">

<text x="69" y="96" text-anchor="middle" font-family="&quot; Arial&quot; "

font-size="15px" stroke="none" fill="#008080" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); text-anchor: middle; font-family:

Arial; font-size: 15px; cursor: move; " ident="id_1464204194240"

stroke-width="2" indexInArray="5">

<tspan dy="5.5" style="-webkit-tap-highlight-color: rgba (0, 0, 0,0); ">label</tspan>

</text>

<ellipse cx="69" cy="96" rx="22" ry="20" fill="#008080" stroke="#008080"

stroke-width="2" fill-opacity="0" indexInArray="5" style="-webkit-

tap-highlight-color: rgba (0, 0, 0, 0); fill-opacity: 0; cursor:

move; " />

<text x="437" y="216" text-anchor="middle" font-family="&quot; Arial&quot; "

font-size="15px" stroke="none" fill="#ff0000" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); text-anchor: middle; font-family:

Arial; font-size: 15px; cursor: move; " ident="id_1464204196259"

stroke-width="2" indexInArray="6">

<tspan dy="216" style="-webkit-tap-highlight-color: rgba (0, 0, 0, 0); " />

</text>

<ellipse cx="437" cy="216" rx="20" ry="20" fill="#ff0000" stroke="#ff0000"

stroke-width="2" fill-opacity="0" indexInArray="6" style="-webkit-

tap-highlight-color: rgba (0, 0, 0, 0); fill-opacity: 0; cursor:

move; " />

<text x="424" y="96" text-anchor="middle" font-family="&quot; Arial&quot; "

font-size="15px" stroke="none" fill="#008000" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); text-anchor: middle; font-family:

Arial; font-size: 15px; cursor: move; " ident="id_1464204208843"

stroke-width="2" indexInArray="7">

<tspan dy="5.5" style="-webkit-tap-highlight-color: rgba (0, 0, 0,0); ">TitleWithoutS</tspan>

</text>

<ellipse cx="424" cy="96" rx="60.625" ry="20" fill="#008000"

stroke="#008000" stroke-width="2" fill-opacity="0" indexInArray="7"

style="-webkit-tap-highlight-color: rgba (0, 0, 0, 0); fill-opacity:

0; cursor: move; " />

<text x="222.625" y="96" text-anchor="middle" font-

family="&quot; Arial&quot; " font-size="15px" stroke="none"

fill="#0000ff" style="-webkit-tap-highlight-color: rgba (0, 0, 0, 0);

text-anchor: middle; font-family: Arial; font-size: 15px; cursor:

move; " stroke-width="2" indexInArray="8" ident="id_1464204248329">

<tspan dy="5.5" style="-webkit-tap-highlight-color: rgba (0, 0, 0,0); ">Title</tspan>

</text>

<rect x="204" y="76" width="37.25" height="40" rx="10" ry="10"

fill="#0000ff" stroke="#0000ff" style="-webkit-tap-highlight-color:

rgba (0, 0, 0, 0); fill-opacity: 0; cursor: move; " stroke-width="2"

fill-opacity="0" indexInArray="8" ident="id_1464204248325"

propertyName="majorType" propertyValue="Title" operation="=="

propertyType="String" />

<text x="277" y="147" text-anchor="middle" font-family="&quot; Arial&quot; "

font-size="15px" stroke="none" fill="#000000" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); text-anchor: middle; font-family:

Arial; font-size: 15px; cursor: move; " stroke-width="2"

indexInArray="9" ident="id_1464204297594">

<tspan dy="5.5" style="-webkit-tap-highlight-color: rgba (0, 0, 0,0); ">S</tspan>

</text>

<rect x="204" y="76" width="37.25" height="40" rx="10" ry="10"

fill="#0000ff" stroke="#0000ff" style="-webkit-tap-highlight-color:

rgba (0, 0, 0, 0); fill-opacity: 0; cursor: move; " stroke-width="2"

fill-opacity="0" indexInArray="8" ident="id_1464204248325"

propertyName="majorType" propertyValue="Title" operation="=="

propertyType="String" />

<text x="273" y="221" text-anchor="middle" font-family="&quot; Arial&quot; "

font-size="15px" stroke="none" fill="#000000" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); text-anchor: middle; font-family:

Arial; font-size: 15px; cursor: move; " stroke-width="2"

indexInArray="10" ident="id_1464204303909">

<tspan dy="5.5" style="-webkit-tap-highlight-color: rgba (0, 0, 0,0); ">s</tspan>

</text>

<rect x="268" y="201" width="10" height="40" rx="10" ry="10" fill="#0000bf"

stroke="#000000" style="-webkit-tap-highlight-color: rgba (0, 0, 0, 0);

fill-opacity: 0; cursor: move; " stroke-width="2" fill-opacity="0"

indexInArray="10" ident="id_1464204303908" propertyName="undefined"

propertyValue="undefined" operation="undefined"

propertyType="undefined" />

<path fill="none" stroke="#000000"

d="M92.033,96C147.516,96,147.516,96, 203,96" stroke-width="2" obj1="5"

id="id_1464204541973" indexInArray="4" obj2="8" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); " />

<path fill="none" stroke="#000000"

d="M242.25,96C302.267,96,302.267,96,362.285,96" stroke-width="2"

obj1="8" id="id_1464204547859" indexInArray="5" obj2="7" style="-

webkit-tap-highlight-color: rgba (0, 0, 0, 0); " />

<path fill="none" stroke="#000000"

d="M222.625,117C222.625,127,277,127,277,126" stroke-width="2" obj1="8"

id="id_1464204550854" indexInArray="6" obj2="9" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); " />

<path fill="none" stroke="#000000"

d="M277,168C277, 192,346.485,216,415.97,216" stroke-width="2" obj1="9"

id="id_1464204553419" indexInArray="7" obj2="6" style="-webkit-tap-

highlight-color: rgba (0, 0, 0, 0); " />

<path fill="none" stroke="#000000"

d="M222.625,117C222.625,158.5,273,158.5,273, 200" stroke-width="2"

obj1="8" id="id_1464204556176" indexInArray="8" obj2="10" style="-

webkit-tap-highlight-color: rgba (0, 0, 0, 0); " />

<path fill="none" stroke="#000000"

d="M279,221C347.485,221,347.485,216,415.97,216" stroke-width="2"

obj1="10" id="id_1464204559458" indexInArray="9" obj2="6" style="-

webkit-tap-highlight-color: rgba (0, 0, 0, 0); " />

</svg>

</div>

Размещено на Allbest.ru