[jquery] jquery의 추가가 svg 요소와 작동하지 않습니까?

허용 답변 쇼도 방법을 복잡. 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 (이미 DOM에 있음)를 편집 할 수 있습니다. 스크립트없이 “하드 코딩 된”예제에서 Raphael 등을 사용하여 만들었습니다.
• 복잡한 요소 구조를 문자열로 추가 할 수 있습니다 (예 : $('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());라파엘을 사용할 때 작동하지 않습니다. 매우 짧은 해킹 일 것입니다.)

답변

<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");

$('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
      });
  });

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);

// 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>

<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>