Svg nesnelerinin içindeki özel veriler nasıl saklanır?

Question

JavaScript kullanarak oluşturulacak svg nesnesinin içinde bazı (çok fazla) nesne olması planlıyorum. , Fare üzerinde, fare-out tıklayın:

Kullanıcı onlarla farklı aktiviteler yapacağız. Herhangi bir olay meydana geldiğinde, nesnel olan bazı verilerin gösterilmesi gerekir.

Soru: nasıl nesneyle ilgili verileri almak için? Örneğin, kullanıcı "Make A" aracını temsil eden dikdörtgene tıkladı (her biri ayrı bir marka olan birkaç dikdörtgen var). Bir kalıbı nasıl belirleyebilirim? 'Dış veri' svg nesnelerle ilişkilendirmek için herhangi bir yolu var mı? Ben böyle bir şekilde her öğe için 'kimlik' üretebilir öğelerle svg-nesneyi doldurma sırasında:

Answer 1

Eğer jquery.data nesne içinde şeyleri saklamak olamaz değil mi?

Answer 2

Bir çözüm kendim bkz "makea", "makeB", "car_id_10", "bike_id_20". .. vb Ve etkinliği hedef kodu oluşturulacaktır olay dinleyicisi de, bu iyi bir fikir

mi ... nesneleri tanımlamak alacak özel diziye girer? Emin ...

Answer 3

Basit javascript değişkeni oluşturulmuş bir SVG nesnesine bir başvuru saklayabilir. Bir şekil oluştururken Yani, bunu yapabilirsiniz:

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

Şimdi SVG nesnenin bir şekle başvuru var. Ancak onları etkileşimli yapmak istiyorsanız, nesneye bunun gibi nitelikler eklemeniz gerekir. JsFunc() işlevi önceden tanımlanmış bir işlevdir. Şimdi

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

Yalnızca değişkene referansına sahip olamaz, ama kullanımı yoluyla bu tür alternatif kullanarak fonksiyonu jsFunc değişkeni kendisi geçmek: Ayrıca, olayları bu şekilde ayarlayabilirsiniz, işleri kolaylaştırmak için işaretçinin bu.

Eğer dikdörtgenler bir sürü oluşturmak varsa, tek bir Array saklayabilir, böylece bir dizin kullanarak her eleman erişebilir: Bir mülkün olsun

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

hatırla veya

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

ve benzeri: nesnenizin nitelik, böyle fonksiyon getAttribute kullanabilirsiniz.

Yeni değişken türü nesne oluşturmak ve bir üye svg şekli olduğunu kurmak ve üyelerin geri kalanı özelleştirilmiş veri alanları vardır başladı.

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

Answer 4

Tıklama/mouseover/etc-işleyici olsun Event nesne öğesidir target adlı bir özelliğe sahiptir (herhangi bir EventTarget teknik olarak ancak bu durumda element) olay ilk sevk edildiğini .

Özel verileri depolamanın bir yolu, adlandırılmış özellikleri kullanmaktır. Özniteliklerinizi adlandırabilmenizin nedeni, varolan veya gelecekteki svg öznitelikleriyle çakışabilecekleridir.İşte

bir örnek: SVG DOM düzenli kullanan düğümlerin üzerinde

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 5

tüm tarayıcı SVG uygulamalarda, js expando özelliklere sahip yerli nesneleri uzatmak mümkün olduğunu varsaymak genellikle güvenli değil de, veri depolamak için güvenli genleşme özellikleri, örneğin Bu Batik çalışmaz o

node.myCustomData = "foo" 

Not.

Daha fazla bilgi için bu konuları okuyabilir:

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

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

Answer 6

Sen özel etiketler kullanarak SVG içindeki özel veri depolamak veya niteliklerini - Kendi ad kullandığınızdan emin sadece yapmak :

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

Answer 7

DOM Elem "Normal" html koduna girebileceğiniz gibi sadece dizeleri değil, özniteliklerde saklanan rasgele nesneler olabilir.

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

Ayrıca, jquery 3 itibariyle jquery svg elemanları üzerindeki .Data (...) yöntemi (https://api.jquery.com/jquery.data/) destekleyen i im Adobe'den bir svg oluşturarak, bu yaklaşımı nasıl kullanabileceğinizi söyleyebilir