क्या किसी को Raphael.js एसवीजी लाइब्रेरी के साथ कोई अनुभव है?मैं jQuery का उपयोग कर Raphael.js ऑब्जेक्ट्स में सीएसएस शैलियों को कैसे लागू करूं?
मैं एक एसवीजी मानचित्र (स्मार्टफोन पर उपयोग के लिए) बनाने के लिए Raphael.js का उपयोग कर रहा हूं, लेकिन मुझे नक्शा ऑब्जेक्ट्स खोलने में परेशानी हो रही है कि राफेल jQuery द्वारा बाहरी बातचीत के लिए बनाता है और सीएसएस द्वारा स्टाइलिंग करता है।
var R = Array();
R[1] = new Raphael("level1", 408, 286);
R[2] = new Raphael("level2", 408, 286);
R[3] = new Raphael("level3", 408, 286);
R[4] = new Raphael("level4", 408, 286);
R[5] = new Raphael("level5", 408, 286);
var attr = {
fill: "#ccc",
stroke: "#000",
"stroke-width": 0.5,
"stroke-linecap": "square",
"stroke-linejoin": "miter"
};
// loop through a bunch of objects (not shown for brevity)
// in the end, I end up with a couple hundred objects drawn by Raphael
var o = R[fID].path(coordstring).attr(attr);
// creates an #o[ID] id value that jQuery can target
o.node.id = "o"+$(this).attr('id'); // id value comes from data source
o.click(function(){
highlightMapObject(this.node.id.substr(1));
);
// end loop
// accessed from the o.click and from outside in jQuery
function highlightMapObject(oid){
var $target = $("#o"+oid);
$target.addClass('highlight');
}
मुद्दा मुझे लगता है कि राफेल वस्तु के लिए एक वर्ग जोड़ने की कोशिश कर काम नहीं करता है, या यह काम कर रहा है, तो है, उस वर्ग के सीएसएस गुण (बदला हुआ पृष्ठभूमि रंग की तरह, आदि में चल रहे हो रहे हैं) लागू नहीं किया जा रहा है।
तो अगर मेरे .highlight वर्ग है:
.highlight { background-color: #f00; }
है कि लागू नहीं हो रही है या तो, या मूल राफेल attrs से fill:"ccc" अधिलेखित नहीं है। मेरा अनुमान है कि क्योंकि jQuery द्वारा लक्षित आईडी को वस्तु के बजाए राफेल ऑब्जेक्ट NODE पर है, जो शायद समस्या का हिस्सा है।
मैंने राफेल से निपटने के दौरान पूरी तरह से नोड से बचने के लिए बहुत सी सलाह देखी है, लेकिन ऐसा लगता है कि मैंने राफेल ऑब्जेक्ट को बाहरी लक्ष्यीकरण (इस मामले में jQuery के माध्यम से) खोलने का एकमात्र तरीका प्रतीत किया है।
मैं इन वस्तुओं पर शैली परिवर्तन को प्राप्त करने के सीएसएस का उपयोग करने की जरूरत नहीं है, लेकिन मुझे लगता है कि परिवर्तन बाहर से प्राप्त करने के लिए सक्षम होना चाहिए है - के बजाय (jQuery के माध्यम से, बाहरी प्रकाश डाला अनुरोध के जवाब में आदि) सभी आंतरिक (राफेल के माध्यम से और केवल ऑब्जेक्ट क्लिक के जवाब में)।
विचार?
धन्यवाद!
मुझे राफेल लाइब्रेरी पसंद है। मैं विशेष रूप से प्रभावित था कि यह jQuery के साथ एकीकृत कैसे हो सकता है। –