Лучший способ создания интерактивной формы HTML SVG

Question

Мне было поручено создать интерактивную визуальную версию HTML-формы.

Работники оценивают свое мастерство между 1 (плохо) до 5 (отлично) в различных областях:

Client Management: 

[x] 1 (Poor) 
[ ] 2 (OK) 
[ ] 3 (Good) 
[ ] 4 (Great) 
[ ] 5 (Excellent) 

Вместо того, чтобы просто использовать радио-кнопки, однако, идея заключается в том, что они визуализируются в виде полярная сетка.

Каждый кусочек пирога представляет собой область возможностей (например, для работы с клиентами), и каждый сегмент среза указывает на его владение. This is a 3D representation.

Пользователь может выбрать один сегмент на каждую область способности, эквивалентную 1-5, а затем отправить его так, как если бы это была форма. Я начал с создания SVG в Illustrator и добавления классов для управления им с помощью JS/jQuery. Затем я использовал эти классы, чтобы заполнить набор скрытых переключателей, чтобы у меня был способ отправить данные.

It works.

Однако там должен быть менее DIY способом создания и взаимодействия с SVG, что было бы лучше для ремонтопригодности. Например, если бы я хотел добавить новый сегмент, мне пришлось бы повторно создать графику в Adobe Illustrator и добавить новый набор классов в файл (а также снова добавить старые в новый вывод).

Каков наилучший способ решения такого рода интерактивных SVG с точки зрения обслуживания?

Answer 1

SVG не является технологией формы, поэтому вы не найдете ничего идеального. И хотя я рассматриваю только что-нибудь с d3, чтобы быть DIY, это очень приличный случай использования (see examples gallery).

Возможно, вы можете сделать это примерно в 50 строках кода d3 или около того. Может, меньше.

Как следует из комментария Роберта, это технически создает svg, используя DOM, однако использование d3 - это гораздо лучший способ сделать это, чем делать это вручную.

Отмечу, что d3 - это svg, почти как jquery, для html (его действительно полезно с html, но использование используется чаще с svg). Подобно jQuery, вы можете начать использовать d3 почти сразу, но чем больше времени вы инвестируете в его изучение и «получение», тем более потрясающие выгоды вы будете пожинать.

Answer 2

Существует несколько библиотек JavaScript для создания, управления и анимации SVG. Наиболее известными являются RaphaëlJS (http://raphaeljs.com) и Snap.svg (http://snapsvg.io). RaphaëlJS работает даже в старых браузерах, таких как IE6, с помощью резервного копирования VML. Snap.svg разработан специально для современных браузеров.

Answer 3

Применение JavaScript к SVG ничем не отличается от применения его к HTML. SVG - это изображение на основе кода, нарисованное при визуализации браузером на основе кода файла SVG. Вы можете включить файл непосредственно на страницу или вставить его. Затем вам просто нужно применить JavaScript к элементу SVG, как к элементу в HTML.

Сначала перейдите в SVG-файл (при условии, что он отделен от страницы) и добавьте любой идентификатор, который вы хотите использовать (class или id).

Во-вторых, напишите свой JavaScript, как будто это не что иное, как другой элемент HTML, который вы хотите манипулировать. Итак, если вы хотите, чтобы что-то произошло, когда мышь нависает над секцией, тогда напишите, что это было, если вы хотите, чтобы это произошло с кнопкой и заменило кнопку для целевого элемента SVG.

Редактировать: Как видно из комментариев к моей реакции, даже через встраивание SVG, то DOM будет рассматривать его отдельно, поэтому вы должны включать в себя код SVG непосредственно из этого.

Адрес JSFiddle, в котором показано, как добавить код прямо к странице. Если вы накинете на рот, он станет красным.

Если вы добавите SVG на страницу как img, она будет отображаться как изображение, и JavaScript не будет работать. Вот это JSFiddle, чтобы это продемонстрировать.

Однако, если вы используете object или embed, JavaScript все еще может работать на нем. Ниже приведен рабочий пример пяти основных методов добавления SVG: http://www.schepers.cc/svg/blendups/embedding.html

Что касается легкой модификации SVG, то это либо через код (в текстовом редакторе), либо графический редактор (например, Illustrator). До тех пор, пока у вас есть исходный файл, не нужно его редактировать, но нет «простого» способа сделать это. Одна из приятных особенностей SVG заключается в том, что это полностью программируемый образ. Конечно, приятно иметь возможность проектировать его визуально, это то, что веб-дизайнеры делают для веб-сайтов, но если вы хотите «действительно» работать с ним, вам нужно работать с кодом.

Прошу прощения, если это не тот ответ, который вы искали, но я надеюсь, что это поможет очистить все.