SVG примеры - заготовки для проекта Мастер (обучение)
Страница (от 06.04.2018) - имитация движения сред.
animate1 - простейшая индикация с помощью polyline и stroke-dasharray.
animate2 - управляемая анимация polyline, stroke-dasharray и stroke-dashoffset.
animate3 - перемещение произвольных фигур клонированием (defs use).
animate4, animate5 - использование animateMotion.
Группа клавиш grpoup7 управляет анимацией.
Имитация пламени (просто примеры) демонстрируется на flame1 - flame4, причем:
flame1 - нарезка из ru.vector.me/browse/443133/flames,
flame2 - пример https://codepen.io/2xsamurai/pen/EKpYMg,
flame3 и flame4 - gif анимация 99px_ru_animacii_7553_plamja_na_prozrachnom_fone.gif и
Kaimanu_Logo_Flames_Final_3.gif.
Слева - разные способы формирования целей для радаров: фильтры и градиенты.
Простые решения не очень красивы...
Страница (от 14.03.2018) - для виртуальных тренажеров и пультов.
Осциллограф отличается от подобного (см. пример от 18.02.2018) удвоенной плотностью точек.
Группа индикаторов tablo4 управляется переключателем switch1. Позиция переключателя устанавливается
щелчком по цифре.
Позиция переключателя switch2 устанавливается щелчком по цифре или нажатием на левую или правую части основания.
Группа клавиш grpoup7 управляет разметкой первых двух шкал. Шкала 360 градусов отличаеся
принципом формирования от предыдущих двух. Кнопка 3 grpoup7 включает режим задания угла клавиатурой в
пределах 0-360.
Экран радара упрощен (минимальная шкала, нет подложки имитации поверности, яркость целей неизменна) для понимания
принципов построения и управления им.
Страница (от 18.02.2018) - для виртуальных тренажеров и пультов.
Группа индикаторов tablo 2 содержит пары прямоугольников с управлением видимостью ближнего.
Группа индикаторов tablo 3 содержит по одному прямоугольнику и выборку из массива цветов.
Левый осциллограф ближе к цифровому, правый имитирует использование ЭЛТ.
Первый штурвал - развертка, второй - вертикальная линия, причем перемещение линиии ограничено,
а штурвал не ограничен по накоплению параметра.
Третий штурвал - развертка.
Группы клавиш не требуют пояснений.
Первая страница (от 03.02.2018) - для виртуальных тренажеров и пультов.
Позиционирование - transform="translate(x,y)" для большинства элементов.
Для джойстика:
// x0 y0 - translate joystick
var x0j1 = 600; var y0j1 = 370
Полезные ссылки
1. intuit.ru - SVG
2. Про SVG и другое
3. SVG элементы мнемосхем
Заготовки сыроваты, но, возможно, пригодятся.