गतिशील रूप से jQuery

इस एचटीएमएल + svgगतिशील रूप से jQuery

<div id="svg" style="width: 300px; height: 300px"> 
    <svg xmlns="http://www.w3.org/2000/svg" width="300" height="300"> 
     <svg x='10' y='10' id='group'> 
      <rect id="rect" x='0' y='0' width='100' height='100' fill='#f0f0f0'/> 
     </svg> 
     <svg x='100' y='100' id='group2'> 
      <rect id="rect2" x='0' y='0' width='100' height='100' fill='#f00000'/> 
      <foreignobject x='0' y='0' width='100' height='100' > 
       <body> 
        <div>manual</div> 
       </body> 
      </foreignobject> 
     </svg> 
    </svg> 
</div>

मैं # समूह में एक foreignObject सम्मिलित करना चाहते हैं को देखते हुए के साथ svg में foreignObject सम्मिलित (अधिमानतः jQuery के साथ हेरफेर आसान बनाता है के लिए)। मैंने कोशिश की है (कोड सिर से स्केची है)

$("#group").append("<foreignobject x='0' y='0' width='100' height='100'><body><div>auto</div></body></foreignobject>")

शायद इसका कोई फायदा नहीं हुआ क्योंकि "शरीर" छीन लिया जाता है। मैंने बॉडी एलिमेंट बनाने के सर्वोत्तम विदेशी तरीकों की कोशिश की है और सबसे अच्छा मैं कर सकता हूं - फ़ायरबग अब डाले गए विदेशी ऑब्जेक्ट तत्व को भूरे रंग में नहीं डालता है लेकिन यह अभी भी दिखाई नहीं दे रहा है।

तो या तो मैं कुछ स्पष्ट नहीं देख रहा हूं या ऐसा करने का एक अजीब तरीका है।

विचार?

अंतिम समाधान इस के साथ अद्यतन है कि मैं क्या साथ

var foreignObject = document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject'); 
var body = document.createElement('body'); // you cannot create bodies with .apend("<body />") for some reason 
$(foreignObject).attr("x", 0).attr("y", 0).attr("width", 100).attr("height", 100).append(body); 
$(body).append("<div>real auto</div>"); 
$("#group").append(foreignObject);

स्रोत

2012-09-17 durilka

एसवीजी केस संवेदी है और तत्व नाम आप चाहते हैं foreignObject कहा जाता है। डोम का उपयोग कर इसे बनाने के लिए आप कहेंगे

document.createElementNS('http://www.w3.org/2000/svg', 'foreignObject')

स्रोत

2012-09-17 15:28:24

फ़ायरफ़ॉक्स और क्रोम परमिट केस असंवेदनशील svg टैग दोनों - कम से कम कोड ऊपर मैन्युअल रूप से परिभाषित विदेशी वस्तु दिखाता है – durilka

-1

jQuery आया की कम से कम है अच्छी तरह से एसवीजी दस्तावेजों के लिए अनुकूल नहीं है।

लेकिन आप अभी भी jQuery के सिलसिले में सादा जे एस इस्तेमाल कर सकते हैं:

var foreignObject = document.createElement('foreignobject'); 

/* add further child elements and attributes to foreignObject */ 

document.getElementById('group').appendChild(foreignObject);

स्रोत

2012-09-17 15:09:08 feeela

कोड के इस बल्कि वर्बोज़ टुकड़ा अभी भी कुछ नहीं प्रदर्शित करता है 'वर foreignObject = document.createElement ('http://www.w3.org/2000/svg', 'विदेशी वस्तु'); विदेशी ऑब्जेक्ट.सेट एट्रिब्यूट ("एक्स", "0"); विदेशी ऑब्जेक्ट.सेट एट्रिब्यूट ("वाई", "0"); विदेशी ऑब्जेक्ट.सेट एट्रिब्यूट ("चौड़ाई", "100"); विदेशी ऑब्जेक्ट.सेट एट्रिब्यूट ("ऊंचाई", "100"); var body = document.createElement ('body'); var div = document.createElement ('div'); var text = document.createTextNode ("auto"); div.appendChild (टेक्स्ट); body.appendChild (div); विदेशी ऑब्जेक्ट.एपेंड चाइल्ड (बॉडी); document.getElementById ('group') .appendChild (ForeignObject); ' – durilka

document.createElement document.createElementNS –

दस्तावेज़ होना चाहिए। क्रिएटइलेमेंट्स को केवल दो तत्वों की आवश्यकता होती है, न कि केवल तत्व जिसे आप बनाना चाहते हैं, बल्कि 'http: // www। w3.org/2000/svg ' –

गतिशील रूप से jQuery

उत्तर

संबंधित मुद्दे