Как хранить пользовательские данные внутри svg-объектов?

Question

Я планирую иметь несколько (много) объектов внутри svg-объекта, которые будут сгенерированы с использованием JavaScript.

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

Вопрос: как получить данные об объекте?Например, пользователь нажал на прямоугольник, который представляет автомобиль «Make A» (есть несколько прямоугольников, каждый из которых представляет отдельную марку)Как я могу определить марку?Есть ли способ связать «внешние данные» с svg-объектами?

Answer 1

Объект Event , который вы получаете в обработчике click / mouseover / etc, имеет свойство с именем target, которое является элементом (технически любым EventTarget, но в данном случае это элемент), что событие был впервые отправлен на.

Одним из способов хранения пользовательских данных является использование атрибутов пространства имен. Причина, по которой вы должны именовать пространство ваших атрибутов, заключается в том, что они могут конфликтовать с существующими или будущими атрибутами SVG.

Вот пример:

var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rect.setAttributeNS("http://www.example.com/yourcustomnamespace", "data", "whatever-data-you-want-here");
rect.addEventListener("click", myclickhandler, false);
...

function myclickhandler(evt)
{
  var target = evt.target;
  // specialcase for use elements
  if (target.correspondingUseElement)
    target = target.correspondingUseElement;
  alert(target);
  alert(target.getAttributeNS("http://www.example.com/yourcustomnamespace", "data"))
}

Answer 2

Вы можете сохранить ссылку на объект SVG, созданный в простой переменной javascript.Итак, когда вы создаете фигуру, вы можете сделать это:

myRect = document.createElementNS("http://www.w3.org/2000/svg", "rect");

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

myRect.setAttribute("onclick", "jsFunc()");

, где jsFunc () - это ранее определенная функция.Кроме того, чтобы упростить задачу, вы можете установить события следующим образом:

myRect.onclick = function(){jsFunct(this, otherArg);}

Теперь вы можете не только получить ссылку на переменную, но и передать саму переменную в функцию jsFunc, используя такую ​​альтернативу черезиспользование указателя this.

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

myRect = new Array();
for(i = 1; i <= numMakes; i = i + 1){
    myRect[i] = document.createElementNS("http://www.w3.org/2000/svg", "rect");
}

Помните, чтобы получить свойство или атрибут вашего объекта, вы можете использовать функцию getAttribute, например:

fillColor = myRect.getAttribute("fill");
x = myRect.getAttribute("x");

и т. Д.

Вы можете создать новыйпеременный тип объекта и установите, что один член является формой svg, а остальные члены являются вашими настраиваемыми полями данных.

var myRect = new Object();
myRect.shape = document.createElementNS("http://www.w3.org/2000/svg", "rect");
myRect.customField = myValue;

Answer 3

Хотя обычно небезопасно предполагать, что можно расширять собственные объекты с помощью свойств js expando, во всех реализациях SVG в браузерах безопасно хранить данные на узлах SVG DOM с использованием обычных свойств expando, например,

node.myCustomData = "foo"

Обратите внимание, что это не работает в батике.

Вы можете прочитать эти темы для получения дополнительной информации:

http://tech.groups.yahoo.com/group/svg-developers/message/64659

http://tech.groups.yahoo.com/group/svg-developers/message/63002

Answer 4

Разве вы не можете хранить вещи в объекте jquery.data ?

Answer 5

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

http://www.w3.org/TR/SVG/extend.html#ForeignNamespaces

Answer 6

В DOM-элементах могут храниться произвольные объекты в атрибутах, а не просто в строках, которые вы можете ввести в «нормальный» HTML-код.

someSVGElement.setAttribute("myApp.car.model", Global.Car.Models.mercedes");

Кроме того, начиная с jquery 3, jquery поддерживает метод .data (...) (https://api.jquery.com/jquery.data/) для элементов svg

Answer 7

Я сам вижу одно решение: во время заполнения svg-объекта элементами, я может генерировать 'id' для каждого элемента следующим образом: "makeA", "makeB", "car_id_10", "bike_id_20", ... и т. д. И в прослушивателе событий я получу идентификатор цели события, перейду в специальный массив, который будет описывать объекты ...

Это хорошая идея?Не уверен ...