जावास्क्रिप्ट

के साथ प्रोग्रामेटिक रूप से एक एसवीजी छवि तत्व बनाना मेरे शीर्षक की तरह, मैं जावास्क्रिप्ट का उपयोग कर HTML पृष्ठ में प्रोग्रामिंग रूप से एक एसवीजी छवि तत्व बनाने की कोशिश कर रहा हूं। किसी कारण से मेरा मूल जावास्क्रिप्ट कोड काम नहीं कर रहा है, हालांकि अगर मैं रैफेलज लाइब्रेरी का उपयोग करता हूं तो यह ठीक काम करता है। तो जाहिर है मेरे जेएस के साथ एक समस्या है - मैं बस यह पता लगाने के लिए प्रतीत नहीं कर सकता कि यह क्या है।जावास्क्रिप्ट

(ध्यान दें: लक्ष्य ब्राउज़र FF4 + है)

यहाँ मैं क्या ऊपर प्राप्त करने के लिए कोशिश कर रहा हूँ का एक HTML संस्करण के साथ बुनियादी पृष्ठ है:

<html> 
    <head> 
     <script type="text/javascript" src="http://raphaeljs.com/raphael.js"></script> 
    </head> 
    <body> 

     <svg 
     xmlns="http://www.w3.org/2000/svg" 
     xmlns:xlink="http://www.w3.org/1999/xlink" 
     id="test1" 
     height="200px" 
     width="200px"> 
      <image 
      id="testimg1" 
      xlink:href="http://i.imgur.com/LQIsf.jpg" 
      width="100" 
      height="100" 
      x="0" 
      y="0"/> 
     </svg> 

     <hr /> 

     <p id="testP1"> 


     </p> 
     <hr />  
     <p id="testP2"> 


     </p>   
    </body> 
</html>

और यहाँ मेरा है जावास्क्रिप्ट:

var paper = Raphael(document.getElementById("testP1"), 200, 200); 
paper.image("http://i.imgur.com/LQIsf.jpg", 0,0, 100, 100); 



var svg = document.createElementNS('http://www.w3.org/2000/svg','svg'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','xlink','http://www.w3.org/1999/xlink'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','height','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','width','200'); 
svg.setAttributeNS('http://www.w3.org/2000/svg','id','test2'); 

var svgimg = document.createElementNS('http://www.w3.org/2000/svg','image'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','height','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','width','100'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','id','testimg2'); 
svgimg.setAttributeNS('http://www.w3.org/1999/xlink','href','http://i.imgur.com/LQIsf.jpg'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','x','0'); 
svgimg.setAttributeNS('http://www.w3.org/2000/svg','y','0'); 

svg.appendChild(svgimg); 

document.querySelector('#testP2').appendChild(svg);

लाइव उदाहरण: http://jsfiddle.net/Yansky/UVFBj/5/

स्रोत

2011-07-15 Yansky

एसवीजी देशी गुण (xlink:href सहित) एसवीजी नेमस्पेस साझा नहीं करते हैं; आप उपयोग कर सकते हैं या तो setAttributeNS का सिर्फ setAttribute बजाय, या उदाहरण के लिए

svgimg.setAttributeNS(null,'x','0');

का उपयोग करें।

यहाँ यह है, काम कर रहे: http://jsfiddle.net/UVFBj/8/

ध्यान दें कि मैं अपने बेला ठीक से एक्सएचटीएमएल उपयोग करने के लिए बदल गया है, ताकि एसवीजी सभी प्रमुख ब्राउज़रों में यह के भीतर अच्छी तरह से काम करता है।

स्रोत

2011-07-15 01:54:44 Phrogz

आह, मैं देखता हूं। इसे साफ करने के लिए धन्यवाद। :) – Yansky

हे भगवान, बहुत बहुत धन्यवाद। तुम राजा हो! –

आपने मेरा दिन बचाया, आप एक सज्जन और विद्वान हैं, आपको लगता है सर। –

भविष्य के संदर्भ के लिए।

मैं एसवीजी तत्व बनाने के लिए फ़ंक्शन को हल कर रहा हूं और यह xlink: href की वजह से छवियों को बनाने में विफल रहा था।

कोड bellow करने के लिए कि

function makeSVG(parent, tag, attrs) { 
      var el= document.createElementNS('http://www.w3.org/2000/svg', tag); 
      for (var k in attrs){ 
       if(k=="xlink:href"){ 
        el.setAttributeNS('http://www.w3.org/1999/xlink', 'href', attrs[k]); 
       }else{ 
        el.setAttribute(k, attrs[k]); 
       } 
      } 
     }

नमूना उपयोग (मक्खी पर किसी भी svg तत्व बनाने) में सुधार किया जाए:

makeSVG('#map-tiles', 'image', { class:'map-tile', 'xlink:href':'map/xxx.jpg', width:'512px', height: '512px' x:'0', y:'0'});

माता पिता svg समूहों पर 'परतें' व्यवस्थित करने के लिए प्रयोग किया जाता है टैग।

स्रोत

2014-04-17 20:03:48

मुझे लगता है कि इसे बनाने के बाद आपको नया तत्व डालना चाहिए। यही आपके पास "पैरेंट" पैरामीटर है। – dkellner

इसके लिए धन्यवाद। मैंने इसे समाधान के लिए लगभग 8 घंटे के बाद पाया। – VirtuosiMedia

जावास्क्रिप्ट

उत्तर

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