एक एसवीजी के साथ JQuery Draggable और <object>?

Question

मेरे पास एक तालिका कक्ष में प्रदर्शित ऑब्जेक्ट टैग के भीतर एक एसवीजी फ़ाइल है, और मैं JQuery के ड्रैगगेबल का उपयोग कर तालिका सेल के भीतर एसवीजी ड्रैगगेबल बनाना चाहता हूं। कोड - शून्य से टैग में भ्रामक बिट्स, इस तरह दिखता है:

<div id="container"> 
<div id="box"> 
    <table align="center" border="1"> 
     <tr> 
      <td valign="middle">button</td> 
      <td valign="top" id="objtd"> 
       <div id="objdiv1"> 
        <object id="svgobject1">blah, blah</object> 
       </div> 
      </td> 
      <td valign="middle">button</td> 
     </tr>  

अगर मैं टैग से सेट खींचने योग्य के रूप में, खींचने योग्य काम नहीं करता। अगर मैं टैग को लपेटता हूं, और खींचने योग्य बनाता हूं, तो मैं div के मार्जिन का उपयोग करके खींच सकता हूं, एसवीजी स्वयं नहीं। मैं इस तरह एसवीजी वस्तु के संभाल की स्थापना की कोशिश की:

$('#objdiv1').draggable({ handle: '#svgobject1' }); 

लेकिन यह है कि रूप में अच्छी तरह विफल रहा है।

क्या एसवीजी ऑब्जेक्ट को एसवीजी पर क्लिक करके खींचकर खींचने योग्य कोई तरीका है?

मैंने उदाहरण के लिए here एक उदाहरण स्थापित किया है, जिससे यह देखने में सहायता मिलती है कि मैं किस बारे में बात कर रहा हूं।

Answer 1

एचटीएमएल सामग्री <object> की सामग्री पर माउस घटनाओं को देखने के लिए नहीं मिलता है। पृष्ठ में लिपियों केवल माउस इंटरैक्शन डेटा तक पहुंच सकते हैं यदि प्लग-इन जिम्मेदार जानबूझकर इसे कस्टम इंटरफ़ेस के माध्यम से उपलब्ध कराता है।

मैं <object> का उपयोग करने के बजाय पृष्ठ के हिस्से के रूप में एसवीजी सामग्री समेत सुझाव देता हूं। इसका मतलब है कि आपको पृष्ठ को application/xhtml+xml के रूप में प्रस्तुत करना होगा, और एसवीजी तत्वों के लिए नामस्थान जोड़ें। Example। इनलाइन एसवीजी के साथ, एसवीजी तत्व स्वयं माउस घटनाओं का जवाब देते हैं और HTML तत्वों की तरह ही लिखे जा सकते हैं।

इनलाइन एसवीजी की कमी यह है कि यह एसवीजी प्लग-इन के साथ आईई पर काम नहीं करेगा। लेकिन फिर किसी ने भी वर्षों से प्लग-इन का उपयोग नहीं किया है, और आईई 9 इनलाइन एसवीजी का भी समर्थन करेगा।

Answer 2

मेरे मामले में (मैं क्रोम केवल ऐप लिख रहा हूं और मेरे एसवीजी एक अलग फाइल में हैं) मैं ऑब्जेक्ट टैग को आईएमजी टैग में "एटीजी/एसवीजी + एक्सएमएल" टाइप प्रकार के साथ बदल सकता हूं, "और src विशेषता मेरी svg फ़ाइल के पथ पर सेट है, और जिसने मेरे लिए समस्या हल की है।

आपका माइलेज अन्य ब्राउज़रों में भिन्न हो सकता है, लेकिन यदि आप वेबकिट के लिए लिख रहे हैं, तो यह दृष्टिकोण काम करता प्रतीत होता है।