प्रोटोटाइप एसवीजी तत्वों का विस्तार कर सकते हैं?

Question

मैं एक इंटरैक्टिव एसवीजी मानचित्र विकसित करने की कोशिश कर रहा हूं और इनलाइन एसवीजी तत्वों को विस्तारित करने के लिए प्रोटोटाइप नहीं लग रहा है। यहाँ मेरी उदाहरण कोड (पथ डेटा निकाल दिया क्योंकि वह बहुत बड़ा है) है:

<svg id="map" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" width="330" height="500" viewBox="-16037,-19651 28871,44234"> 
    <g id="state_outline"> 
     <path id="state" fill="white" stroke-width="200" d="..." /> 
     <path id="water" fill="#a0a0ff" d="..." /> 
    </g> 
    <g id="counties"> 
     <path class="county" id="adams" d="..." /> 
     ... 
    </g> 
</svg> 

<div id="nottamap"></div>  

<script type="text/javascript"> 
    console.log($('nottamap')); 
    console.log($('nottamap').identify()); 
    console.log($('counties')); 
    console.log($('counties').identify()); 
</script> 

कि चलाने का परिणाम है:

<div id="nottamap"> 
nottamap 
<g id="counties"> 
$("counties").identify is not a function 

$() सिर्फ अगर यह हिस्सा है तत्व इसे करने के लिए पारित किया विस्तार करने के लिए इंकार कर रहा है एसवीजी तत्व का। क्या एक्सएमएल तत्वों के साथ प्रोटोटाइप की बातचीत के बारे में कुछ है जो मुझे समझ में नहीं आ रहा है, या इसके बारे में मेरे लिए जाने का एक बेहतर तरीका है?

Answer 1

प्रोटोटाइप इसके Element.addMethods विधि के माध्यम से तत्वों को बढ़ाता है। आप the source code को देखें, तो आप इस प्रासंगिक हिस्सा देख सकते हैं:

var elementPrototype = window.HTMLElement ? HTMLElement.prototype : 
    Element.prototype; 

if (F.ElementExtensions) { 
    copy(Element.Methods, elementPrototype); 
    copy(Element.Methods.Simulated, elementPrototype, true); 
} 

यहाँ यह HTMLElement.prototype जो एसवीजी तत्वों के वारिस नहीं है के पक्ष में है। यह उन ब्राउज़रों में Element.prototype पर वापस आता है (खांसी आईई खांसी) जो एसवीजी का समर्थन नहीं करती है। आपके पास स्रोत को संपादित करने और सभी कॉपी क्रियाओं को SVGElement पर डुप्लिकेट करने का विकल्प भी है।

---

यह बहुत काम करता है जब आप महसूस करते हैं कि एक सरल हैक का उपयोग किया जा सकता है। स्थैतिक Element.* विधियों का उपयोग तब भी किया जाता है जब सीधे उपयोग किया जाता है। $('counties').identify() के बजाय Element.identify('counties') का उपयोग करें। आप कहाँ कुछ इस तरह कर सकते हैं:

$$('.classname').each(Element.hide); 
// or replace Element.hide with Effect.fade or any other effect 

नकारात्मक पक्ष यह है कि आप विधि श्रृंखलन का उपयोग नहीं है:

$$('.classname').invoke('hide'); 

आप अच्छा कार्यात्मक समकक्ष जो गोद ले सकते हैं।

Answer 2

प्रोटोटाइप स्रोत कोड बदलने के लिए घड़ीवर्कगेक के सुझाव ने मेरे लिए बहुत अच्छा काम किया। ।। प्रोटोटाइप वी 1.7, सभी यह लेता प्रोटोटाइप बनाम

var elementPrototype = window.HTMLElement ? HTMLElement.prototype : 
    Element.prototype; 

if (F.ElementExtensions) { 
    if (window.SVGElement) { 
    copy(Element.Methods, SVGElement.prototype); 
    copy(Element.Methods.Simulated, SVGElement.prototype, true); 
    } 
    copy(Element.Methods, elementPrototype); 
    copy(Element.Methods.Simulated, elementPrototype, true); 
} 

के लिए प्रासंगिक हिस्सा बदलने के लिए है 1.7.1, आवश्यक परिवर्तन कर रहे हैं:

var ELEMENT_PROTOTYPE = window.HTMLElement ? HTMLElement.prototype : 
    Element.prototype; 

if (F.ElementExtensions) { 
    if (window.SVGElement) { 
    mergeMethods(SVGElement.prototype, Element.Methods); 
    mergeMethods(SVGElement.prototype, Element.Methods.Simulated, true); 
    } 
    mergeMethods(ELEMENT_PROTOTYPE, Element.Methods); 
    mergeMethods(ELEMENT_PROTOTYPE, Element.Methods.Simulated, true); 
} 

मैं पहले से तैयार समाधान नहीं मिला this blog post