สมมติว่าสิ่งนี้:
<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>ทำไมฉันไม่เห็นอะไรเลย
คำตอบ:
เมื่อคุณส่งสตริงมาร์กอัปเข้าไป$จะมีการแยกวิเคราะห์เป็น HTML โดยใช้innerHTMLคุณสมบัติของเบราว์เซอร์บน<div>(หรือคอนเทนเนอร์อื่นที่เหมาะสมสำหรับกรณีพิเศษเช่น<tr>) innerHTMLไม่สามารถแยกวิเคราะห์ SVG หรือเนื้อหาที่ไม่ใช่ HTML อื่น ๆ ได้และถึงแม้ว่าจะทำได้ แต่ก็ไม่สามารถบอกได้ว่า<circle>ควรอยู่ในเนมสเปซ SVG
innerHTMLไม่พร้อมใช้งานบน SVGElement— เป็นคุณสมบัติของ HTMLElement เท่านั้น ในปัจจุบันไม่มีทั้งinnerSVGพร็อพเพอร์ตี้หรือวิธีอื่น (*) ในการแยกวิเคราะห์เนื้อหาลงใน SVGElement ด้วยเหตุนี้คุณควรใช้วิธี DOM สไตล์ jQuery ไม่ให้คุณเข้าถึงวิธีการเนมสเปซที่จำเป็นในการสร้างองค์ประกอบ SVG ได้อย่างง่ายดาย จริงๆแล้ว jQuery ไม่ได้ออกแบบมาเพื่อใช้กับ SVG เลยและการดำเนินการหลายอย่างอาจล้มเหลว
HTML5 สัญญาว่าจะให้คุณใช้ได้<svg>โดยไม่ต้องใช้เอกสารxmlnsHTML ( text/html) แบบธรรมดาในอนาคต แต่นี่เป็นเพียงการแยกวิเคราะห์ (**) เนื้อหา SVG จะยังคงเป็น SVGElements ในเนมสเปซ SVG และไม่ใช่ HTMLElements ดังนั้นคุณจะไม่สามารถใช้งานinnerHTMLได้แม้ว่าจะดูเหมือนเป็นส่วนหนึ่งของเอกสาร HTML
อย่างไรก็ตามสำหรับเบราว์เซอร์ของวันนี้คุณต้องใช้X HTML (ทำหน้าที่อย่างถูกต้องapplication/xhtml+xmlบันทึกด้วยนามสกุลไฟล์. xhtml สำหรับการทดสอบในท้องถิ่น) เพื่อให้ SVG ทำงานได้ (เป็นเรื่องที่สมเหตุสมผลอยู่แล้ว SVG เป็นมาตรฐาน XML ที่เหมาะสม) ซึ่งหมายความว่าคุณต้องหลีกเลี่ยง<สัญลักษณ์ในบล็อกสคริปต์ของคุณ (หรือล้อมรอบในส่วน CDATA) และรวมการxmlnsประกาศXHTML ตัวอย่าง:
<!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>*: ดีมีระดับparseWithContextของ LS ระดับ 3 แต่การสนับสนุนเบราว์เซอร์แย่มาก แก้ไขเพื่อเพิ่ม: อย่างไรก็ตามในขณะที่คุณไม่สามารถฉีดมาร์กอัปลงใน 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 ของ shoehorn ในระเบียบ crufty นั่นคือ HTML XHTML แก้ไขปัญหาเหล่านี้เมื่อหลายปีก่อน
d3.select('body').append('svg').attr('width','100%');
คำตอบที่ได้รับการยอมรับการแสดงความซับซ้อนเกินไปวิธี ดังที่ Forresto อ้างในคำตอบของเขา " ดูเหมือนว่าจะเพิ่มไว้ใน DOM explorer แต่ไม่ปรากฏบนหน้าจอ " และเหตุผลสำหรับสิ่งนี้คือเนมสเปซที่แตกต่างกันสำหรับ html และ svg
วิธีแก้ปัญหาที่ง่ายที่สุดคือ "รีเฟรช" svg ทั้งหมด หลังจากต่อท้ายวงกลม (หรือองค์ประกอบอื่น ๆ ) ให้ใช้สิ่งนี้:
$("body").html($("body").html());นี่เป็นการหลอกลวง วงกลมอยู่บนหน้าจอ
หรือถ้าคุณต้องการใช้ div คอนเทนเนอร์:
$("#cont").html($("#cont").html());และห่อ svg ของคุณใน div คอนเทนเนอร์:
<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 แก้ไข:
เทคนิคดังกล่าวใช้งานได้กับ "hard coded" หรือ DOM manipulated (= document.createElementNS ฯลฯ ) SVG เท่านั้น หาก Raphael ใช้สำหรับการสร้างองค์ประกอบ (ตามการทดสอบของฉัน) การเชื่อมโยงระหว่างวัตถุ Raphael กับ SVG DOM $("#cont").html($("#cont").html());จะใช้งานไม่ได้หากใช้ วิธีหลีกเลี่ยงปัญหานี้ไม่ควรใช้$("#cont").html($("#cont").html());เลยและใช้เอกสาร SVG แทน
หุ่นจำลองนี้เป็นตัวแทนฉบับต้นฉบับของเอกสาร SVG และมีองค์ประกอบที่จำเป็นเท่านั้น ถ้าเราต้องการเช่น ในการเพิ่มองค์ประกอบตัวกรองลงในเอกสารของราฟาเอลหุ่นจำลองอาจเป็นอะไร<svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>ก็ได้ การแสดงข้อความต้นฉบับจะถูกแปลงเป็น DOM ครั้งแรกโดยใช้ $ ("body") ของ jQuery วิธีการผนวก () และเมื่อองค์ประกอบ (ตัวกรอง) อยู่ใน DOM ก็สามารถสอบถามได้โดยใช้วิธีการ jQuery มาตรฐานและผนวกเข้ากับเอกสาร SVG หลักซึ่งสร้างโดย Raphael
ทำไมต้องใช้หุ่นนี้ ทำไมไม่เพิ่มองค์ประกอบตัวกรองลงในเอกสารที่สร้างโดย Raphael อย่างเคร่งครัด หากคุณลองใช้เช่น $("svg").append("<circle ... />")มันถูกสร้างขึ้นเป็นองค์ประกอบ HTML และไม่มีอะไรบนหน้าจอตามที่อธิบายไว้ในคำตอบ แต่ถ้าเอกสาร SVG ทั้งหมดต่อท้ายเบราว์เซอร์จะจัดการการแปลงเนมสเปซขององค์ประกอบทั้งหมดในเอกสาร SVG โดยอัตโนมัติ
ตัวอย่างทำให้เข้าใจเทคนิค:
// 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());ไม่ทำงานเมื่อใช้ Raphael มันจะเป็นการแฮ็คที่สั้นมาก)
$("#cont").html($("#cont").html());ทำงานได้ดีใน Chrome แต่ไม่ทำงานใน IE 11 สำหรับฉัน
ไลบรารี่D3 ที่ได้รับความนิยมมากขึ้นนั้นจัดการกับสิ่งแปลกปลอมในการต่อท้าย / จัดการ svg ได้อย่างดีมาก คุณอาจต้องการพิจารณาใช้มันตรงข้ามกับ jQuery hacks ที่กล่าวถึงที่นี่
HTML
<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>(ดูเหมือนจะเพิ่มองค์ประกอบเหล่านี้ใน DOM explorer แต่ไม่ปรากฏบนหน้าจอ)
หนึ่งวิธีแก้ปัญหาคือการผนวกกับทุกองค์ประกอบที่คุณต้องการไปยังหน้าแล้วปรับเปลี่ยนคุณสมบัติขององค์ประกอบโดยใช้<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()) ผนวกเอกสาร svg ทั้งหมดลงในคอนเทนเนอร์ แทนที่จะเป็น $ ('body') แน่นอนว่าอาจมี $ ('div') ด้วย และหลังจากนั้นเอกสาร svg นั้นอยู่บน DOM และสามารถสอบถามได้โดยใช้วิธีที่คุ้นเคยเช่น $ ( 'C'). attr ( 'เติม', 'สีแดง')
ฉันไม่เคยเห็นใครพูดถึงวิธีการนี้ แต่document.createElementNS()มีประโยชน์ในกรณีนี้
คุณสามารถสร้างองค์ประกอบโดยใช้ vanilla Javascript เป็นโหนด DOM ปกติด้วยเนมสเปซที่ถูกต้องจากนั้น 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);ข้อเสียเพียงอย่างเดียวคือคุณต้องสร้างองค์ประกอบ SVG แต่ละรายการด้วยเนมสเปซที่ถูกต้องทีละอย่างไม่เช่นนั้นจะไม่ทำงาน
พบวิธีง่ายๆที่ใช้งานได้กับเบราว์เซอร์ทั้งหมดที่ฉันมี (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>ฉันเห็นวงกลมใน Firefox โดยทำสองสิ่ง:
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>ตามคำตอบของ @ chris-dolphin แต่ใช้ฟังก์ชั่นตัวช่วย:
// 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"/>'));
หากสตริงที่คุณต้องการต่อท้ายคือ SVG และคุณเพิ่มเนมสเปซที่เหมาะสมคุณสามารถแยกสตริงเป็น XML และผนวกกับพาเรนต์
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))คำตอบที่ได้รับการยอมรับโดย Bobince เป็นโซลูชันแบบพกพาที่สั้น หากคุณต้องการไม่เพียง แต่ผนวก SVG แต่ยังจัดการคุณสามารถลองใช้ไลบรารี JavaScript "Pablo" (ฉันเขียน) มันจะรู้สึกคุ้นเคยกับผู้ใช้ jQuery
ตัวอย่างรหัสของคุณจะมีลักษณะดังนี้:
$(document).ready(function(){
Pablo("svg").append('<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red"/>');
});คุณยังสามารถสร้างองค์ประกอบ SVG ได้ทันทีโดยไม่ต้องระบุมาร์กอัป:
var circle = Pablo.circle({
cx:100,
cy:50,
r:40
}).appendTo('svg');ฉันอยากจะแนะนำให้ใช้ ajax และโหลดองค์ประกอบ svg จากหน้าอื่น
$('.container').load(href + ' .svg_element');โดยที่ href เป็นที่ตั้งของหน้าเว็บด้วย svg วิธีนี้คุณสามารถหลีกเลี่ยงผลกระทบของการกระวนกระวายใจที่อาจเกิดขึ้นจากการแทนที่เนื้อหา html นอกจากนี้อย่าลืมแกะ svg หลังจากโหลดแล้ว:
$('.svg_element').unwrap();สิ่งนี้ใช้ได้กับฉันในวันนี้ด้วย FF 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()กำลังโคลนองค์ประกอบ SVG (และเป็นลูกถ้ามี) text()มองผ่านการใช้งานของ ฉันใช้ช้อนชาเดี่ยวที่มี "Your New" อยู่ในนั้นและลงท้ายด้วย tspans สองอันหนึ่งอันที่มี "Your" อยู่ในนั้น (สีดำ) และอีกอันที่มี "New in it" (สีน้ำเงิน w / line-through) Jeez ลดลงจาก 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.วิธีที่ง่ายมากคือเพียงแค่สร้าง SVG ของคุณลงในสตริงสร้างองค์ประกอบเสื้อคลุม HTML และแทรกสตริง SVG ลงในองค์ประกอบ HTML $("#wrapperElement").html(svgString)โดยใช้ ใช้งานได้ดีกับ Chrome และ Firefox
RMB>edit as htmlบนแท็ก html และกด Enter ทุกอย่างจะปรากฏขึ้น (แต่ผู้ฟังกิจกรรมทั้งหมดหายไป) หลังจากอ่านคำตอบนี้ฉันเปลี่ยนการเรียกใช้ createElement เป็น createElementNS และตอนนี้ทุกอย่างใช้ได้ผล!