এটি ধরে নিচ্ছি:
<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>এটি এসভিজি নেমস্পেসে থাকার কথা ছিল তাও বলতে সক্ষম হয় না ।
innerHTMLএসভিজিলেমেন্টে উপলভ্য নয় — এটি কেবল এইচটিএমলেমেন্টের সম্পত্তি। innerSVGএসভিজিলেমেন্টে সামগ্রী পার্স করার জন্য বর্তমানে কোনও সম্পত্তি বা অন্য উপায় (*) নেই। এই কারণে আপনার DOM- শৈলী পদ্ধতি ব্যবহার করা উচিত। jQuery আপনাকে এসভিজি উপাদানগুলি তৈরি করতে প্রয়োজনীয় নেমস্পিড পদ্ধতিগুলিতে সহজে অ্যাক্সেস দেয় না। সত্যিই jQuery মোটেও এসভিজির সাথে ব্যবহারের জন্য ডিজাইন করা হয়নি এবং অনেকগুলি অপারেশন ব্যর্থ হতে পারে।
HTML5 এর আপনি ব্যবহার করতে দিতে প্রতিশ্রুতি <svg>একটি ছাড়া xmlnsএকটি সাধারণ HTML- এর (অভ্যন্তরীণ text/html) নথিটি ভবিষ্যতে। তবে এটি কেবলমাত্র একটি পার্সার হ্যাক (**), এসভিজি সামগ্রীটি এখনও এসভিজি নেমস্পেসে এসভিজিইলেটস হবে, এবং এইচটিএমলেমেণ্টস নয়, তাই আপনি কোনও HTML ডকুমেন্টের অংশের মতো দেখতেinnerHTML সত্ত্বেও আপনি ব্যবহার করতে পারবেন না ।
যাইহোক, আজকের ব্রাউজারগুলির জন্য আপনাকে এসভিজিকে মোটেও কাজ করতে পেতে এক্স এইচটিএমএল ( 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 এলএস এর পার্সওয়েথ কনটেক্সট রয়েছে , তবে ব্রাউজার সমর্থনটি খুব খারাপ। যুক্ত করতে সম্পাদনা করুন: তবে আপনি যখন কোনও এসভিজিলেমেন্টে মার্কআপ ইনজেকশন করতে পারবেন না, আপনি এইচটিএমলেমেন্টে একটি নতুন এসভিজিলেমেন্ট ইনজেক্ট করতে পারেন 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>**: এইচটিএমএল 5 এর লেখকরা যেভাবে এক্সএমএলকে ভয় পেয়েছে এবং এটি এক্সএমএল-ভিত্তিক বৈশিষ্ট্যগুলি এইচটিএমএল হ'ল ক্রফটি মেসে জুড়ে দেওয়ার জন্য দৃ determined় প্রতিজ্ঞ বলে আমি ঘৃণা করি। এক্সএইচটিএমএল বহু বছর আগে এই সমস্যাগুলি সমাধান করেছে।
d3.select('body').append('svg').attr('width','100%');
$.parseXML।
গৃহীত উত্তর শো খুব পথ জটিল। যেমন ফরেস্টো তার উত্তরে দাবি করেছে , " মনে হয় এগুলি ডিওএম এক্সপ্লোরারগুলিতে যুক্ত হয়, তবে স্ক্রিনে নয় " এবং এর কারণ এইচটিএমএল এবং এসভিজি-র বিভিন্ন নাম স্থান।
সবচেয়ে সহজ কাজটি হ'ল সম্পূর্ণ এসভিজি "রিফ্রেশ" করা। বৃত্ত (বা অন্যান্য উপাদান) যুক্ত করার পরে, এটি ব্যবহার করুন:
$("body").html($("body").html());এই কৌশলটি করে। বৃত্তটি পর্দায় রয়েছে on
অথবা আপনি যদি চান তবে একটি ধারক ডিভ ব্যবহার করুন:
$("#cont").html($("#cont").html());এবং আপনার এসটিজি কনটেইনার ডিভের অভ্যন্তরে মুড়িয়ে দিন:
<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 ব্যবহার করে সম্পাদনা করা যেতে পারে। সম্পাদনা করুন:
উপরের কৌশলটি কেবল "হার্ড কোডড" বা ডিওএম ম্যানিপুলেটেড (= ডকুমেন্ট। ক্রিয়েটেলমেন্টএনএস ইত্যাদি) এসভিজির সাথে কাজ করে। যদি রাফেলগুলি উপাদান তৈরি করার জন্য ব্যবহৃত হয়, (আমার পরীক্ষাগুলি অনুসারে) রাফেল অবজেক্ট এবং এসভিজি ডোমের মধ্যে লিঙ্ক $("#cont").html($("#cont").html());ব্যবহার করা থাকলে তা ভাঙা । এটির মত কাজটি মোটেও ব্যবহার $("#cont").html($("#cont").html());করা নয় এবং এর পরিবর্তে এটি ডামি এসভিজি ডকুমেন্ট ব্যবহার করে।
এই ডামি এসভিজি প্রথমে এসভিজি নথির একটি পাঠ্য উপস্থাপনা এবং এতে কেবলমাত্র প্রয়োজনীয় উপাদান রয়েছে। আমরা চাই যেমন। রাফেল নথিতে একটি ফিল্টার উপাদান যুক্ত করতে, ডামি কিছু হতে পারে <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>। পাঠ্য উপস্থাপনাটি প্রথমে jQuery এর $ ("বডি") ব্যবহার করে অ্যাপেড () পদ্ধতি ব্যবহার করে ডিওমে রূপান্তরিত হয়। এবং যখন (ফিল্টার) উপাদানটি ডিওমে থাকে, তখন এটি স্ট্যান্ডার্ড জ্যাকুয়েরি পদ্ধতি ব্যবহার করে অনুসন্ধান করা যেতে পারে এবং রাফেল দ্বারা নির্মিত প্রধান এসভিজি নথিতে সংযুক্ত করা যায়।
এই ডামি দরকার কেন? রাফেল তৈরি করা নথিতে কঠোরভাবে কোনও ফিল্টার উপাদান যুক্ত করবেন না কেন? যদি আপনি এটি ব্যবহার করে চেষ্টা করুন। $("svg").append("<circle ... />"), এটি এইচটিএমএল উপাদান হিসাবে তৈরি করা হয়েছে এবং উত্তরে বর্ণিত হিসাবে স্ক্রিনে কিছুই নেই। তবে যদি পুরো এসভিজি ডকুমেন্টটি সংযুক্ত করা হয় তবে ব্রাউজারটি স্বয়ংক্রিয়ভাবে এসভিজি ডকুমেন্টের সমস্ত উপাদানগুলির নেমস্পেস রূপান্তর পরিচালনা করে।
একটি উদাহরণ কৌশল আলোকিত:
// 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());ক্রোমে দুর্দান্ত কাজ করেছে তবে আমার জন্য আইই 11 এ কাজ করেনি।
ক্রমবর্ধমান জনপ্রিয় ডি 3 গ্রন্থাগারটি খুব সুন্দরভাবে এসভিজি সংযোজন / পরিচালনা করার অদ্ভুততাগুলি পরিচালনা করে। আপনি এখানে বর্ণিত 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");জিকুয়েরি উপাদানগুলিকে সংযোজন করতে পারে না <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>জটিল এবং ধীর DOM- পদ্ধতিগুলি (যেমন। createDocumentFragment()বা createElementNS()) ব্যবহার করে স্বতন্ত্রভাবে সংযোজন বা অন্যান্য উপাদানগুলি পরিবর্তে সম্পূর্ণ এস.জি.জি. $ ('দেহ') এর পরিবর্তে এটি অবশ্যই কিছুটা $ ('ডিভ' )ও হতে পারে। এবং এর পরে এসভিজি ডকুমেন্টটি ডিওমে রয়েছে এবং উদাহরণস্বরূপ ব্যবহার করে এটি অনুসন্ধান করা যেতে পারে। $ ( 'গ')। 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);একমাত্র নীচের দিকটি হ'ল আপনাকে স্বতন্ত্রভাবে সঠিক নেমস্পেস দিয়ে প্রতিটি এসভিজি উপাদান তৈরি করতে হবে বা এটি কাজ করবে না।
আমার কাছে থাকা সমস্ত ব্রাউজারের সাথে কাজ করে এমন একটি সহজ উপায় খুঁজে পেয়েছে (ক্রোম 49, এজ 25, ফায়ারফক্স 44, আই 11, সাফারি 5 [উইন], সাফারি 8 (ম্যাকোস)):
// 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) এইচটিএমএল থেকে এক্সএইচটিএমএল ফাইলের নামকরণ
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');আমি পরামর্শ দিচ্ছি যে এজাক্স ব্যবহার করা এবং অন্য পৃষ্ঠা থেকে এসভিজি উপাদানটি লোড করা ভাল।
$('.container').load(href + ' .svg_element');যেখানে href হল 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()। আমি এটির মধ্যে "আপনার নতুন" থাকা একটি একক চামচটি নিয়ে চলেছি এবং দুটি চামচ দিয়ে শেষ করছি, একটিতে এটি "আপনার" (কালো) এবং একটি "এটিতে নতুন" (নীল ডাব্লু / লাইন-মাধ্যমে)) জিৎ, 0 ভোট থেকে নেমে -1 :-(
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 htmlএইচটিএমএল ট্যাগে থাকি এবং হিট করি তবে সমস্ত কিছু প্রদর্শন করে (তবে সমস্ত ইভেন্ট শ্রোতা অদৃশ্য হয়ে যায়)। এই উত্তরটি পড়ার পরে আমি আমার ক্রিয়েট এলিমেন্ট কলগুলি ক্রিয়েলেমেন্টএনএস-তে পরিবর্তন করেছি এবং এখন সবকিছু কাজ করে!