이것을 가정하면 :
<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속성을 사용하여 HTML로 구문 분석됩니다 . SVG 또는 HTML이 아닌 다른 컨텐츠를 구문 분석 할 수 없으며 SVG 네임 스페이스에 있다고 가정 할 수는 없습니다 .<div><tr>innerHTML<circle>
innerHTMLSVGElement에서는 사용할 수 없습니다. HTMLElement만의 속성입니다. 현재 innerSVG콘텐츠를 SVGElement로 구문 분석 하는 속성이나 다른 방법 (*)이 없습니다. 이러한 이유로 DOM 스타일 메소드를 사용해야합니다. jQuery를 사용하면 SVG 요소를 만드는 데 필요한 네임 스페이스가있는 메서드에 쉽게 액세스 할 수 없습니다. 실제로 jQuery는 SVG와 함께 사용하도록 설계되지 않았으며 많은 작업이 실패 할 수 있습니다.
HTML5는 향후 일반 HTML ( ) 문서 <svg>없이도 사용할 수 있도록합니다 . 그러나 이것은 당신이 사용할 수 없을 것이다, 그래서 SVG 콘텐츠는 여전히 SVG 네임 스페이스 SVGElements, 그리고 HTMLElements 될 것입니다 (**) 단지 파서 해킹 그들이 비록 심지어 보면 HTML 문서의 일부처럼.xmlnstext/htmlinnerHTML
그러나 오늘날의 브라우저에서는 SVG가 제대로 작동 하도록하려면 X HTML ( application/xhtml+xml로컬 테스트를 위해 .xhtml 파일 확장명으로 저장)을 올바르게 사용해야 합니다. SVG는 적절한 XML 기반 표준입니다. 이는 <스크립트 블록 내부 의 기호 를 이스케이프 처리 하거나 CDATA 섹션으로 묶어야하며 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>
* : 글쎄, DOM Level 3 LS의 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은 몇 년 전에 이러한 문제를 해결했습니다.
허용 답변 쇼도 방법을 복잡. Forresto가 자신의 답변 에서 주장한 것처럼 " DOM 탐색기에서는 DOM 탐색기에 추가하는 것 같지만 화면에는 표시되지 않습니다 "라는 이유는 html과 svg의 네임 스페이스가 다르기 때문입니다.
가장 쉬운 해결 방법은 전체 svg를 "새로 고침"입니다. 원 (또는 다른 요소)을 추가 한 후 다음을 사용하십시오.
$("body").html($("body").html());이것은 트릭을 수행합니다. 원이 화면에 있습니다.
또는 원하는 경우 컨테이너 div를 사용하십시오.
$("#cont").html($("#cont").html());그리고 컨테이너 div 안에 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에서만 작동합니다. Raphael을 사용하여 요소를 만드는 경우 (내 테스트에 따르면) Raphael 객체와 SVG DOM 간의 연결 $("#cont").html($("#cont").html());이 사용 되면 끊어집니다 . 이에 대한 해결 방법은 전혀 사용하지 $("#cont").html($("#cont").html());않고 더미 SVG 문서를 사용하는 것입니다.
이 더미 SVG는 먼저 SVG 문서의 텍스트 표현이며 필요한 요소 만 포함합니다. 우리가 원한다면. Raphael 문서에 필터 요소를 추가하기 위해 더미는 다음과 같을 수 있습니다 <svg id="dummy" style="display:none"><defs><filter><!-- Filter definitons --></filter></defs></svg>. 텍스트 표현은 먼저 jQuery의 $ ( "body"). append () 메소드를 사용하여 DOM으로 변환됩니다. (filter) 요소가 DOM에있을 때 표준 jQuery 메소드를 사용하여 쿼리하고 Raphael이 생성 한 기본 SVG 문서에 추가 할 수 있습니다.
왜이 더미가 필요한가? 필터 요소를 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());라파엘을 사용할 때 작동하지 않습니다. 매우 짧은 해킹 일 것입니다.)
$("#cont").html($("#cont").html());Chrome에서는 훌륭하게 작동했지만 IE 11에서는 작동하지 않았습니다.
점점 더 인기있는 D3 라이브러리는 svg를 추가 / 조작 할 수있는 가능성을 매우 잘 처리합니다. 여기에 언급 된 jQuery 해킹과 달리 사용하는 것이 좋습니다.
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 탐색기에는 추가하지만 화면에는 나타나지 않는 것처럼 보입니다).
한 가지 해결 방법은 <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 ( 'fill', 'red').
누군가이 방법을 언급하지는 않았지만 document.createElementNS()이 경우 도움이됩니다.
올바른 네임 스페이스를 가진 일반 DOM 노드로 바닐라 Javascript를 사용하여 요소를 작성한 다음 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>파이어 폭스에서 서클을 볼 수 있으며 두 가지 작업을 수행합니다.
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"/>'));
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');이것은 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"가 포함 된 단일 tspan을 가져오고 두 개의 tspan으로 끝나고 하나는 "Your"가 있고 (블랙) 다른 하나는 "New in it"이 있습니다 (파란색). 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.
RMB>edit as htmlhtml 태그와 히트에 입력 한 모든 디스플레이 (하지만 모든 이벤트 리스너가 사라진다). 이 답변을 읽은 후 createElement 호출을 createElementNS로 변경했으며 이제 모든 것이 작동합니다!