जावास्क्रिप्ट createElement और SVG

मैं जावास्क्रिप्ट का उपयोग कर इनलाइन एसवीजी ग्राफिक्स बनाना चाहता हूं।जावास्क्रिप्ट createElement और SVG

हालांकि, ऐसा लगता है कि createElementNS फ़ंक्शन कुछ सामान्यीकरण लागू करता है और सभी टैग को लोअरकेस में बदल देता है। यह HTML के लिए ठीक है लेकिन एक्सएमएल/एसवीजी के लिए नहीं है। एनएस मैंने इस्तेमाल किया http://www.w3.org/2000/svg है।

विशेष रूप से मुझे तत्व बनाने में समस्याएं हैं। जैसा कि इसे जोड़ा जाएगा, इस प्रकार काम नहीं करेगा।

मैंने कुछ खोज किया लेकिन अभी तक समाधान नहीं मिला।

क्या कोई समाधान ढूंढता है?

बहुत बहुत धन्यवाद!

document.createElementNS("http://www.w3.org/2000/svg","textPath");

परिणामों में

<textpath></textpath>

स्रोत

2010-08-16 pat

तुम बाहर कैसे प्राप्त कर सकता ऐसा होता है कैसे आप XML कोड में बनाया तत्व डंप करते एक्सएमएल टैग नाम होना चाहिए संवेदनशील रहें: http://ejohn.org/blog/nodename-case-sensitivity/ –

मुझे आशा है कि, निम्न उदाहरण तुम्हारी मदद करेगा:

<head> 
    <style> 
     #svgContainer { 
      width: 400px; 
      height: 400px; 
      background-color: #a0a0a0; 
     } 
    </style> 
    <script> 
     function CreateSVG() { 
      var xmlns = "http://www.w3.org/2000/svg"; 
      var boxWidth = 300; 
      var boxHeight = 300; 

      var svgElem = document.createElementNS (xmlns, "svg"); 
      svgElem.setAttributeNS (null, "viewBox", "0 0 " + boxWidth + " " + boxHeight); 
      svgElem.setAttributeNS (null, "width", boxWidth); 
      svgElem.setAttributeNS (null, "height", boxHeight); 
      svgElem.style.display = "block"; 

      var g = document.createElementNS (xmlns, "g"); 
      svgElem.appendChild (g); 
      g.setAttributeNS (null, 'transform', 'matrix(1,0,0,-1,0,300)'); 

       // draw linear gradient 
      var defs = document.createElementNS (xmlns, "defs"); 
      var grad = document.createElementNS (xmlns, "linearGradient"); 
      grad.setAttributeNS (null, "id", "gradient"); 
      grad.setAttributeNS (null, "x1", "0%"); 
      grad.setAttributeNS (null, "x2", "0%"); 
      grad.setAttributeNS (null, "y1", "100%"); 
      grad.setAttributeNS (null, "y2", "0%"); 
      var stopTop = document.createElementNS (xmlns, "stop"); 
      stopTop.setAttributeNS (null, "offset", "0%"); 
      stopTop.setAttributeNS (null, "stop-color", "#ff0000"); 
      grad.appendChild (stopTop); 
      var stopBottom = document.createElementNS (xmlns, "stop"); 
      stopBottom.setAttributeNS (null, "offset", "100%"); 
      stopBottom.setAttributeNS (null, "stop-color", "#0000ff"); 
      grad.appendChild (stopBottom); 
      defs.appendChild (grad); 
      g.appendChild (defs); 

       // draw borders 
      var coords = "M 0, 0"; 
      coords += " l 0, 300"; 
      coords += " l 300, 0"; 
      coords += " l 0, -300"; 
      coords += " l -300, 0"; 

      var path = document.createElementNS (xmlns, "path"); 
      path.setAttributeNS (null, 'stroke', "#000000"); 
      path.setAttributeNS (null, 'stroke-width', 10); 
      path.setAttributeNS (null, 'stroke-linejoin', "round"); 
      path.setAttributeNS (null, 'd', coords); 
      path.setAttributeNS (null, 'fill', "url(#gradient)"); 
      path.setAttributeNS (null, 'opacity', 1.0); 
      g.appendChild (path); 

      var svgContainer = document.getElementById ("svgContainer"); 
      svgContainer.appendChild (svgElem);   
     } 

    </script> 
</head> 
<body onload="CreateSVG()"> 
    <div id="svgContainer"></div> 
</body>

स्रोत

2010-08-16 11:07:19 gumape

आपके उत्तर के लिए धन्यवाद। आपके उत्तर और टेक्स्ट-टू-पथ svg उदाहरण के आधार पर: [http://pmast.de/svg/ textToPath.svg] (http://pmast.de/svg/textToPath.svg) मैंने निम्न दस्तावेज़ बनाया: [http://pmast.de/svg/textToPath.html ](http://pmast.de/ svg/textToPath.html) हालांकि परिणामी स्रोत समान दिखता है और तत्वों का निर्माण आपके उदाहरण का पालन करता है, मेरा दस्तावेज़ काम नहीं कर रहा है ... क्या मुझे कुछ याद आ रहा है? – pat

आपके उदाहरण ने मुझे जेएस से एसवीजी तत्व बनाने के साथ शुरू करने में मदद की। अभी भी कोर डोम पर W3.org spec दस्तावेज़ को पढ़ना पड़ा। नेमस्पेस बल्कि उलझन में हैं। सुझावों के लिए धन्यवाद। – CyberFonic

क्या यह लोगों के लिए काम करता है? मुझे बस किसी भी एसवीजी तत्वों के बिना एक ग्रे बॉक्स मिलता है। (फ़ायरफ़ॉक्स और क्रोम एक जैसे) – schlingel

-4

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

<b id="myElement"></b>

और जब मैं तत्व बना सकते हैं या जानकारी मैं होगा जोड़ने के लिए बस कार्य करें:

document.getElementById('myElement').innerHTML = 'your stuff here';

मुझे आशा है कि था उपयोगी।

स्रोत

2011-05-19 17:43:58 Johnydep

यह प्रश्न एसवीजी के बारे में है, HTML नहीं। – gilly3

@ gilly3 उसे एक बिंदु मिला है - स्वीकृत उत्तर में मूल रूप से स्क्रैच से एक एसवीजी डोम तत्व बनाना शामिल है, जबकि यह जानना कि कैसे करना है और तकनीकी रूप से अधिक सही उत्तर, पूरी तरह से व्यावहारिक नहीं है। चूंकि एसवीजी फ़ाइल में एसवीजी सिंटैक्स ज्यादातर डीओएम में एसवीजी परिभाषा वाक्यविन्यास के समान होता है (' CCJ

यह एक सुंदर विशिष्ट उपयोग केस है - पूरे एसवीजी ड्राइंग मार्कअप को एक स्ट्रिंग के रूप में रखने के लिए, और इसे HTML तत्व के रूप में संलग्न करें। सवाल विशेष रूप से एक मौजूदा ड्राइंग में एक एसवीजी तत्व जोड़ने के बारे में पूछ रहा है। अब, आज आप कुछ ब्राउज़रों में एक एसवीजी तत्व के 'आंतरिक HTML' लिख सकते हैं, लेकिन [वह कार्यक्षमता नई है, और केवल इस वर्ष के शुरू में ही उपलब्ध है] (http://stackoverflow.com/questions/23275112#comment45705022_23279658) । आज आईई में किसी मौजूदा ड्राइंग में तत्व जोड़ने का एकमात्र तरीका, और इस प्रश्न से पूछे जाने वाले सभी ब्राउज़रों में 'createElementNS() 'के माध्यम से है। – gilly3

सबसे पहले, createElementNS का उपयोग करें, जैसा कि आप कर रहे हैं। Mozilla documentation के अनुसार, createElement (NS के बिना) स्वचालित रूप से HTML दस्तावेज़ों के अंदर तत्व नाम को कम करता है।

दूसरा, Google क्रोम की "निरीक्षण तत्व" सुविधा पर भरोसा न करें। ऐसा लगता है कि प्रत्येक तत्व लोअरकेस में प्रदर्शित करता है, इससे कोई फर्क नहीं पड़ता कि वास्तविक नोडनाम क्या है। इसे आज़माएं:

 
    > document.createElementNS("http://www.w3.org/2000/svg", "textPath").nodeName 
    "textPath" 
    > document.createElement("textPath").nodeName 
    "TEXTPATH"

आपकी समस्या एक असंबंधित समस्या हो सकती है। उदाहरण के लिए, इस कोड को फ़ायरफ़ॉक्स में ठीक काम करता है, लेकिन क्रोम में टूट जाता है (12.0.742.112):

<html> 
    <head> 
     <script> 
     function animateSVG() { 
      var svgNS = "http://www.w3.org/2000/svg"; 
      var textElement = document.getElementById("TextElement"); 
      var amElement = document.createElementNS(svgNS, "animateMotion"); 
      console.log(textElement); 
      console.log(amElement); 
      console.log(amElement.nodeName); 
      amElement.setAttribute("path", "M 0 0 L 100 100"); 
      amElement.setAttribute("dur", "5s"); 
      amElement.setAttribute("fill", "freeze"); 
      textElement.appendChild(amElement); 
      //amElement.beginElement(); 
     }; 
     </script> 
    </head> 
    <body onload="animateSVG()"> 
    <svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg"> 
     <g transform="translate(100,100)"> 
     <text id="TextElement" x="0" y="0" style="font-family:Verdana;font-size:24"> 
      It's SVG! 
      <!-- <animateMotion path="M 0 0 L 100 100" dur="5s" fill="freeze"/> --> 
     </text> 
     </g> 
    </svg> 
    </body> 
</html>

मेरे मुद्दा शायद क्रोम में animateMotion के टूटे हैंडलिंग (Issue 13585) के साथ कुछ है।

आपकी समस्या एक जैसी हो सकती है, या यह एक और मुद्दा हो सकता है, लेकिन यह सुनिश्चित कर लें कि आपको तत्व निरीक्षक द्वारा बेवकूफ नहीं बनाया जा रहा है।

स्रोत

2011-07-06 15:16:49 dlitz

क्रोम के बारे में आपकी टिप्पणी तत्व सुविधा का निरीक्षण करता है मेरा दिन बचाया, धन्यवाद – ZPiDER

मैंने अभी भी एक ही समस्या का समाधान किया है। document.createElement (और मैं document.createElementNS मानता हूं), जब एक HTML पृष्ठ से बुलाया जाता है तो एक HTML नोड बनाता है (जहां मामला कोई फर्क नहीं पड़ता), एक एक्सएमएल नोड नहीं।

क्रोम में निम्नलिखित काम करता है:

डॉक = document.implementation.createDocument (शून्य, शून्य, नल); doc.createElementNS ("http: //www.w3।org/2000/svg "," textPath ");।?

आप अपने मिश्रित केस नोड मिल जाएगा

स्रोत

2012-10-17 03:24:24

जावास्क्रिप्ट createElement और SVG

उत्तर

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