यह मानते हुए:
<html>
<head>
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});
</script>
</head>
<body>
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</body>
मुझे कुछ दिखाई क्यों नहीं दे रहा है?
जवाबों:
जब आप मार्कअप स्ट्रिंग पास करते हैं $, तो यह ब्राउज़र की innerHTMLसंपत्ति <div>(जैसे विशेष मामलों के लिए अन्य उपयुक्त कंटेनर <tr>) का उपयोग करके HTML के रूप में पार्स किया जाता है । innerHTMLएसवीजी या अन्य गैर-एचटीएमएल सामग्री को पार्स नहीं किया जा सकता है, और यहां तक कि अगर यह <circle>एसवीजी नामस्थान में होना चाहिए, यह बताने में सक्षम नहीं होगा ।
innerHTMLSVGElement पर उपलब्ध नहीं है - यह केवल HTMLElement की संपत्ति है। न ही वर्तमान में एक innerSVGसंपत्ति या अन्य तरीके (*) के लिए एक SVGElement में सामग्री को पार्स करने के लिए है। इस कारण से आपको DOM- शैली के तरीकों का उपयोग करना चाहिए। jQuery आपको SVG एलिमेंट बनाने के लिए आवश्यक नामस्थान विधियों तक आसान पहुँच नहीं देता है। वास्तव में jQuery को SVG के साथ उपयोग के लिए डिज़ाइन नहीं किया गया है और कई ऑपरेशन विफल हो सकते हैं।
HTML5 आपको भविष्य में एक सादे HTML ( ) दस्तावेज़ के <svg>बिना उपयोग करने का वादा करता है । लेकिन यह सिर्फ एक पार्सर हैक (**) है, एसवीजी सामग्री अभी भी एसवीजी नामस्थान में एसवीजीईएलटीएस होगी, और एचटीएमएलईएस नहीं, इसलिए आप HTML दस्तावेज़ के भाग की तरह दिखने के बावजूद उपयोग नहीं कर पाएंगे ।xmlnstext/htmlinnerHTML
हालाँकि, आज के ब्राउज़रों के लिए आपको एसवीजी को काम करने के लिए एक्स एचटीएमएल ( application/xhtml+xmlस्थानीय परीक्षण के लिए .xhtml फ़ाइल एक्सटेंशन के साथ ठीक से सेव करें) के रूप में उपयोग करना चाहिए । (यह किसी भी तरह से समझ में आता है; एसवीजी एक उचित रूप से एक्सएमएल-आधारित मानक है।) इसका मतलब है कि आपको <अपने स्क्रिप्ट ब्लॉक के अंदर प्रतीकों से बचना होगा (या सीडीएटीए अनुभाग में संलग्न करें), और एक्सएचटीएमएल xmlnsघोषणा शामिल करें । उदाहरण:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"><head>
</head><body>
<svg id="s" xmlns="http://www.w3.org/2000/svg"/>
<script type="text/javascript">
function makeSVG(tag, attrs) {
var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
for (var k in attrs)
el.setAttribute(k, attrs[k]);
return el;
}
var circle= makeSVG('circle', {cx: 100, cy: 50, r:40, stroke: 'black', 'stroke-width': 2, fill: 'red'});
document.getElementById('s').appendChild(circle);
circle.onmousedown= function() {
alert('hello');
};
</script>
</body></html>
*: ठीक है, वहाँ डोम स्तर 3 रास parseWithContext है , लेकिन ब्राउज़र का समर्थन बहुत गरीब है। जोड़ने के लिए संपादित करें: हालाँकि, जब तक आप मार्कअप को एक SVGElement में इंजेक्ट नहीं कर सकते हैं, आप एक नए SVGElement को HTMLElement का उपयोग करके इंजेक्ट कर सकते हैं innerHTML, फिर इसे इच्छित लक्ष्य पर स्थानांतरित कर सकते हैं। हालांकि यह थोड़ा धीमा होने की संभावना है:
<script type="text/javascript"><![CDATA[
function parseSVG(s) {
var div= document.createElementNS('http://www.w3.org/1999/xhtml', 'div');
div.innerHTML= '<svg xmlns="http://www.w3.org/2000/svg">'+s+'</svg>';
var frag= document.createDocumentFragment();
while (div.firstChild.firstChild)
frag.appendChild(div.firstChild.firstChild);
return frag;
}
document.getElementById('s').appendChild(parseSVG(
'<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" onmousedown="alert(\'hello\');"/>'
));
]]></script>
**: मुझे नफरत है कि HTML5 के लेखक XML से डरने लगते हैं और XML-आधारित सुविधाओं को HTML में गड़बड़ करने के लिए निर्धारित किया जाता है। XHTML ने इन समस्याओं को सालों पहले हल किया था।
d3.select('body').append('svg').attr('width','100%');
स्वीकार किए जाते हैं जवाब से पता चलता है भी तरह से जटिल। जैसा कि फॉरेस्टो अपने जवाब में दावा करता है , " यह उन्हें डोम एक्सप्लोरर में जोड़ने के लिए लगता है, लेकिन स्क्रीन पर नहीं " और इसका कारण एचटीएमएल और एसवीजी के लिए अलग-अलग नामस्थान हैं।
सबसे आसान समाधान पूरे svg को "ताज़ा" करना है। सर्कल (या अन्य तत्वों) को जोड़ने के बाद, इसका उपयोग करें:
$("body").html($("body").html());यह ट्रिक करता है। स्क्रीन पर सर्कल है।
या यदि आप चाहते हैं, एक कंटेनर div का उपयोग करें:
$("#cont").html($("#cont").html());और कंटेनर के अंदर अपना svg लपेटें:
<div id="cont">
<svg xmlns:svg="http://www.w3.org/2000/svg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 100" width="200px" height="100px">
</svg>
</div>
कार्यात्मक उदाहरण:
http://jsbin.com/ejifab/1/edit
इस तकनीक के फायदे:
$('svg').prepend('<defs><marker></marker><mask></mask></defs>');जैसे आप jQuery में करते हैं। $("#cont").html($("#cont").html());उनकी विशेषताओं का उपयोग करके उन्हें jQuery का उपयोग करके संपादित किया जा सकता है। संपादित करें:
उपरोक्त तकनीक केवल "हार्ड कोडित" या DOM मैनिप्युलेटेड (= document.createElementNS आदि) SVG के साथ काम करती है। यदि राफेल का उपयोग तत्वों को बनाने के लिए किया जाता है, (मेरे परीक्षणों के अनुसार) राफेल ऑब्जेक्ट्स और SVG DOM के बीच लिंकिंग $("#cont").html($("#cont").html());का उपयोग किया जाता है तो टूट जाता है। इसके लिए वर्कअराउंड बिल्कुल भी उपयोग नहीं करना है $("#cont").html($("#cont").html());और इसके बजाय डमी एसवीजी दस्तावेज़ का उपयोग करना है।
यह डमी एसवीजी पहले एसवीजी दस्तावेज का एक पाठात्मक प्रतिनिधित्व है और इसमें केवल ऐसे तत्व शामिल हैं जिनकी आवश्यकता है। अगर हम उदाहरण के लिए चाहते हैं। राफेल दस्तावेज़ में एक फिल्टर तत्व जोड़ने के लिए, डमी कुछ ऐसा हो सकता है <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>। शाब्दिक प्रतिनिधित्व को पहले jQuery के $ ("बॉडी") का उपयोग करके डोम में परिवर्तित किया जाता है। और जब (फ़िल्टर) तत्व DOM में होता है, तो इसे मानक jQuery विधियों का उपयोग करके क्वेरी किया जा सकता है और मुख्य SVG दस्तावेज़ में जोड़ा जाता है जो राफेल द्वारा बनाया जाता है।
इस डमी की आवश्यकता क्यों है? राफेल निर्मित दस्तावेज़ के लिए कड़ाई से एक फिल्टर तत्व क्यों नहीं जोड़ा जाता है? यदि आप इसे प्रयोग करके देखें। $("svg").append("<circle ... />"), यह html तत्व के रूप में बनाया गया है और स्क्रीन पर कुछ भी नहीं है जैसा कि उत्तर में वर्णित है। लेकिन अगर पूरे एसवीजी दस्तावेज़ को जोड़ा जाता है, तो ब्राउज़र स्वचालित रूप से एसवीजी दस्तावेज़ में सभी तत्वों के नामस्थान रूपांतरण को संभालता है।
एक उदाहरण तकनीक को प्रबुद्ध करता है:
// Add Raphael SVG document to container element
var p = Raphael("cont", 200, 200);
// Add id for easy access
$(p.canvas).attr("id","p");
// Textual representation of element(s) to be added
var f = '<filter id="myfilter"><!-- filter definitions --></filter>';
// Create dummy svg with filter definition
$("body").append('<svg id="dummy" style="display:none"><defs>' + f + '</defs></svg>');
// Append filter definition to Raphael created svg
$("#p defs").append($("#dummy filter"));
// Remove dummy
$("#dummy").remove();
// Now we can create Raphael objects and add filters to them:
var r = p.rect(10,10,100,100);
$(r.node).attr("filter","url(#myfilter)");
इस तकनीक का फुल वर्किंग डेमो यहाँ है: http://jsbin.com/ilinan/1/edit ।
(मेरे पास (अभी तक) कोई विचार नहीं है, $("#cont").html($("#cont").html());राफेल का उपयोग करते समय काम क्यों नहीं होता है। यह बहुत ही छोटा हैक होगा।)
$("#cont").html($("#cont").html());क्रोम में बहुत अच्छा काम किया, लेकिन मेरे लिए IE 11 में काम नहीं किया।
तेजी से लोकप्रिय डी 3 लाइब्रेरी बहुत अच्छी तरह से svg को जोड़ने / हेरफेर करने की विषमताओं को संभालती है। आप यहां बताए गए jQuery हैक के विपरीत इसका उपयोग करने पर विचार कर सकते हैं।
एचटीएमएल
<svg xmlns="http://www.w3.org/2000/svg"></svg>जावास्क्रिप्ट
var circle = d3.select("svg").append("circle")
.attr("r", "10")
.attr("style", "fill:white;stroke:black;stroke-width:5");
JQuery तत्वों को जोड़ नहीं सकता है <svg>(यह उन्हें डोम एक्सप्लोरर में जोड़ने के लिए लगता है, लेकिन स्क्रीन पर नहीं)।
एक वर्कअराउंड उन <svg>सभी तत्वों के साथ जोड़ना है, जिन्हें आपको पृष्ठ की आवश्यकता है, और फिर उपयोग करने वाले तत्वों की विशेषताओं को संशोधित करें .attr()।
$('body')
.append($('<svg><circle id="c" cx="10" cy="10" r="10" fill="green" /></svg>'))
.mousemove( function (e) {
$("#c").attr({
cx: e.pageX,
cy: e.pageY
});
});<circle>व्यक्तिगत रूप से जटिल और धीमी गति से डोम-विधियों (जैसे। createDocumentFragment()या createElementNS()) का उपयोग करके व्यक्तिगत रूप से संलग्न करने के बजाय , कंटेनर में पूरे svg दस्तावेज़ को संलग्न करें। $ ('शरीर') के बजाय यह निश्चित रूप से कुछ $ ('div') भी हो सकता है। और उसके बाद svg डॉक्यूमेंट DOM पर है और उदाहरण के लिए परिचित तरीके से क्वेर किया जा सकता है। $ ( 'सी')। attr ( 'भरने', 'लाल')।
मैंने किसी को इस विधि का उल्लेख करते नहीं देखा है लेकिन document.createElementNS()इस उदाहरण में सहायक है।
आप सही नामस्थान के साथ सामान्य डोम नोड्स के रूप में वेनिला जावास्क्रिप्ट का उपयोग करने वाले तत्व बना सकते हैं और फिर उन्हें वहां से jQuery-ify कर सकते हैं। इस तरह:
var svg = document.createElementNS('http://www.w3.org/2000/svg', 'svg'),
circle = document.createElementNS('http://www.w3.org/2000/svg', 'circle');
var $circle = $(circle).attr({ //All your attributes });
$(svg).append($circle);केवल नीचे की ओर यह है कि आपको प्रत्येक एसवीजी तत्व को व्यक्तिगत नामस्थान के साथ व्यक्तिगत रूप से बनाना होगा या यह काम नहीं करेगा।
एक आसान तरीका मिला जो मेरे पास मौजूद सभी ब्राउज़रों के साथ काम करता है (Chrome 49, Edge 25, Firefox 44, IE11, Safari 5 [Win], Safari 8 (MacOS)):
// Clean svg content (if you want to update the svg's objects)
// Note : .html('') doesn't works for svg in some browsers
$('#svgObject').empty();
// add some objects
$('#svgObject').append('<polygon class="svgStyle" points="10,10 50,10 50,50 10,50 10,10" />');
$('#svgObject').append('<circle class="svgStyle" cx="100" cy="30" r="25"/>');
// Magic happens here: refresh DOM (you must refresh svg's parent for Edge/IE and Safari)
$('#svgContainer').html($('#svgContainer').html());.svgStyle
{
fill:cornflowerblue;
fill-opacity:0.2;
stroke-width:2;
stroke-dasharray:5,5;
stroke:black;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="svgContainer">
<svg id="svgObject" height="100" width="200"></svg>
</div>
<span>It works if two shapes (one square and one circle) are displayed above.</span>मैं फ़ायरफ़ॉक्स में सर्कल देख सकता हूं, 2 चीजें कर रहा हूं:
1) html से xhtml में नाम बदलना
2) स्क्रिप्ट को बदलें
<script type="text/javascript">
$(document).ready(function(){
var obj = document.createElementNS("http://www.w3.org/2000/svg", "circle");
obj.setAttributeNS(null, "cx", 100);
obj.setAttributeNS(null, "cy", 50);
obj.setAttributeNS(null, "r", 40);
obj.setAttributeNS(null, "stroke", "black");
obj.setAttributeNS(null, "stroke-width", 2);
obj.setAttributeNS(null, "fill", "red");
$("svg")[0].appendChild(obj);
});
</script>@ क्रिस-डॉल्फिन के उत्तर पर आधारित है, लेकिन हेल्पर फ़ंक्शन का उपयोग करते हुए:
// Creates svg element, returned as jQuery object
function $s(elem) {
return $(document.createElementNS('http://www.w3.org/2000/svg', elem));
}
var $svg = $s("svg");
var $circle = $s("circle").attr({...});
$svg.append($circle);$svg.append($s('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>'));
यदि आपको स्ट्रिंग करने की आवश्यकता है, तो आप एसवीजी हैं और आप उचित नाम स्थान जोड़ सकते हैं, आप स्ट्रिंग को एक्सएमएल के रूप में पार्स कर सकते हैं और अभिभावक को जोड़ सकते हैं।
var xml = jQuery.parseXML('<circle xmlns="http://www.w3.org/2000/svg" cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
$("svg").append(xml.documentElement))बॉबसन द्वारा स्वीकृत उत्तर एक छोटा, पोर्टेबल समाधान है। यदि आपको एसवीजी को न केवल संलग्न करने की आवश्यकता है, बल्कि इसे हेरफेर भी करना है, तो आप जावास्क्रिप्ट लाइब्रेरी "पाब्लो" (मैंने इसे लिखा है) की कोशिश कर सकते हैं । यह jQuery उपयोगकर्ताओं के लिए परिचित महसूस करेगा।
आपका कोड उदाहरण तब दिखेगा:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});आप मार्कअप को निर्दिष्ट किए बिना, मक्खी पर एसवीजी तत्व भी बना सकते हैं:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');मेरा सुझाव है कि अजाक्स का उपयोग करना और svg तत्व को दूसरे पृष्ठ से लोड करना बेहतर हो सकता है।
$('.container').load(href + ' .svg_element');जहां href svg के साथ पेज का स्थान है। इस तरह से आप html सामग्री को बदलने से होने वाले किसी भी घिनौने प्रभाव से बच सकते हैं। इसके बाद, लोड होने के बाद svg को खोलना न भूलें:
$('.svg_element').unwrap();यह मेरे लिए आज एफएफ 57 के साथ काम कर रहा है:
function () {
// JQuery, today, doesn't play well with adding SVG elements - tricks required
$(selector_to_node_in_svg_doc).parent().prepend($(this).clone().text("Your"));
$(selector_to_node_in_svg_doc).text("New").attr("x", "340").text("New")
.attr('stroke', 'blue').attr("style", "text-decoration: line-through");
}बनाता है:
$(this).clone()एक एसवीजी तत्व का क्लोनिंग किया जाता है (और यदि यह कोई था तो बच्चे हैं)। के उपयोग के अतीत को देखो text()। मैं एक एकल tspan ले रहा हूं, जिसमें "आपका नया" था, और दो tspans के साथ समाप्त हो रहा था, एक इसमें "Your" के साथ (काला) और एक "New in" (ब्लू w / लाइन-थ्रू) के साथ।
var svg; // if you have variable declared and not assigned value.
// then you make a mistake by appending elements to that before creating element
svg.appendChild(document.createElement("g"));
// at some point you assign to svg
svg = document.createElementNS('http://www.w3.org/2000/svg', "svg")
// then you put it in DOM
document.getElementById("myDiv").appendChild(svg)
// it wont render unless you manually change myDiv DOM with DevTools
// to fix assign before you append
var svg = createElement("svg", [
["version", "1.2"],
["xmlns:xlink", "http://www.w3.org/1999/xlink"],
["aria-labelledby", "title"],
["role", "img"],
["class", "graph"]
]);
function createElement(tag, attributeArr) {
// .createElementNS NS is must! Does not draw without
let elem = document.createElementNS('http://www.w3.org/2000/svg', tag);
attributeArr.forEach(element => elem.setAttribute(element[0], element[1]));
return elem;
}
// extra: <circle> for example requires attributes to render. Check if missing.एक सरल तरीका यह है कि आप अपने एसवीजी को एक स्ट्रिंग में उत्पन्न करें, एक रैपर एचटीएमएल तत्व बनाएं और उपयोग करते हुए एचटीएमएल स्ट्रिंग को एचटीएमएल में डालें $("#wrapperElement").html(svgString)। यह क्रोम और फ़ायरफ़ॉक्स में ठीक काम करता है।
RMB>edit as htmlHTML टैग और हिट पर दर्ज सब कुछ प्रदर्शित करता है (लेकिन सभी घटना श्रोताओं गायब हो)। इस जवाब को पढ़ने के बाद मैंने अपनी createElement कॉल्स को createElementNS में बदल दिया और अब सब कुछ काम करता है!