[JQUERY] JQuery와 APPEND SVG 요소와 작동하지?
JQUERYJQuery와 APPEND SVG 요소와 작동하지?
해결법
-
1.당신이 $로 마크 업 문자열을 전달하면, 그것은 (
과 같은 특별한 경우 또는 다른 적절한 컨테이너)는 의 브라우저의 innerHTML 속성을 사용하여 HTML로 분석입니다. innerHTML을은 SVG 또는 기타 비 HTML 콘텐츠를 구문 분석 할 수 없습니다, 그리고 그 <원>을 말할 수 없을 것입니다 수있는 경우에도 SVG 네임 스페이스에 있어야했다.당신이 $로 마크 업 문자열을 전달하면, 그것은 (
과 같은 특별한 경우 또는 다른 적절한 컨테이너)는 의 브라우저의 innerHTML 속성을 사용하여 HTML로 분석입니다. innerHTML을은 SVG 또는 기타 비 HTML 콘텐츠를 구문 분석 할 수 없습니다, 그리고 그 <원>을 말할 수 없을 것입니다 수있는 경우에도 SVG 네임 스페이스에 있어야했다.innerHTML을가 사용할 수 없습니다 SVGElement - 그것은 단지는 HTMLElement의 속성입니다. 둘 다 현재 SVGElement로 해석 내용에 innerSVG 속성 또는 다른 방법 (*)가 없다. 이러한 이유로 당신은 DOM 스타일의 방법을 사용한다. jQuery를 당신에게 SVG 요소를 만드는 데 필요한 네임 스페이스 방법에 쉽게 액세스 권한을 부여하지 않습니다. 정말 jQuery를이 실패 할 수있는 모든 많은 작업에서 SVG와 함께 사용하도록 설계되어 있지 않습니다.
HTML5는 향후 일반 HTML 내부에 XMLNS없이
그러나 오늘날의 브라우저는 XHTML을 사용해야합니다 (제대로 응용 프로그램 / XHTML + XML로 제공, 현지 테스트를위한 .xhtml 파일 확장자 저장) 모두에서 작업에 SVG를 얻을 수 있습니다. (그것은 만든다 어쨌든에 감지 종류의;. 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 레벨 3 LS의 parseWithContext는하지만 브라우저 지원이 매우 좋지 않습니다. 편집 추가 : 그러나, 동안 당신이 할 수없는 분사 마크 업을 SVGElement에, 당신이 다음에,는 HTMLElement 사용 innerHTML을에 새로운 SVGElement을 주입하여 원하는 대상에 전송할 수 있습니다. 그것은 가능성이 조금 느린 비록 수 있습니다 :
<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 무서워하고 HTML입니다 crufty 혼란에 구둣 주걱 XML 기반 기능을 결정하는 것 방법을 싫어. XHTML 년 전 이러한 문제를 해결했다.
2.허용 대답 쇼도 방법을 복잡. Forresto는 그의 대답에 주장대로, "DOM 탐색기에 추가하는 것,하지만 화면에 않습니다"와 그 이유 HTML과 SVG에 대해 서로 다른 네임 스페이스입니다.
허용 대답 쇼도 방법을 복잡. Forresto는 그의 대답에 주장대로, "DOM 탐색기에 추가하는 것,하지만 화면에 않습니다"와 그 이유 HTML과 SVG에 대해 서로 다른 네임 스페이스입니다.
가장 쉬운 해결 방법은 "새로 고침"전체 SVG이다. 원 (또는 다른 요소)를 추가 한 후, 이것을 사용 :
$("body").html($("body").html());이 트릭을 수행합니다. 원은 화면에 있습니다.
당신이 원하는 경우 또는 컨테이너 사업부를 사용합니다 :
$("#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
이 기술의 장점 :
편집하다:
위의 기술은 "하드 코딩"또는 DOM은 (= 위해 document.createElementNS 등) SVG를 조작 작동합니다. 라파엘이 요소를 만드는 데 사용되는 경우 라파엘 간의 연결이 개체 (내 테스트에 따른) 및 SVG DOM은 $ 경우 ( "#의 계속") HTML ($ ( "#의 계속") HTML ()). 세분화된다.; 사용. 이에 대한 해결 방법은 $ ( "#의 계속")를 사용하지 않는 것입니다 HTML ($ ( "#의 계속") HTML ().).; 전혀 대신 그것의 더미 SVG 문서를 사용합니다.
이 더미 SVG 먼저 SVG 문서의 텍스트 표현하고 필요한 경우에만 요소가 포함되어 있습니다. 우리가 원하는 경우 예. <<인증 된 정의> <필터> : 라파엘 문서에 필터 요소를 추가, 더미는 < "없음 표시"SVG 아이디 = "더미"스타일 => 같은 수 / 인증 된 정의> . 원문 표현은 첫째 jQuery의 $ ( "몸")를 사용하여 DOM으로 변환됩니다. APPEND () 메소드. 제 (필터) 요소 DOM에있을 때, 그것은 jQuery를 표준 방법을 사용하여 쿼리 라파엘 의해 만들어진 메인 SVG 문서에 첨부 될 수있다.
왜이 더미가 필요하다? 왜 라파엘이 문서를 만든 엄격에 필터 요소를 추가하려면? 당신은 예를 사용하여 시도하십시오. 대답에 기재된 $ ( "SVG"). APPEND ( "<... 원 />")가 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.
(나는이 (아직)없는 생각, 왜 $ ( "#의 계속") HTML ($ ( "#의 계속") HTML ());.... 라파엘을 사용하는 경우 그것은 매우 짧은 해킹없는 일이 될 것이다 않음)
3.점점 인기 D3 라이브러리 / 추가 아주 멋지게 SVG를 조작하는 기이을 처리합니다. 당신은 여기에 언급 된 jQuery를 해킹 반대로 그것을 사용하는 것이 좋습니다.
점점 인기 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");4.JQuery와 요소를 추가 할 수 없습니다에
JQuery와 요소를 추가 할 수 없습니다에
한 가지 해결 방법을 사용하면 페이지를 필요로하는 모든 요소를 가진
$('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 }); });http://jsfiddle.net/8FBjb/1/
5.이 방법하지만 위해 document.createElementNS () 나는 누군가의 언급을 보지 못했다는이 인스턴스에 도움이됩니다.
이 방법하지만 위해 document.createElementNS () 나는 누군가의 언급을 보지 못했다는이 인스턴스에 도움이됩니다.
당신은 거기에서 그들을 jQuery를이 - 쓸어 다음 일반 DOM의 올바른 네임 스페이스 노드와 같은 바닐라 자바 스크립트를 사용하여 요소를 만들 수 있습니다. 그래서 같이 :
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 요소를 만들 필요가 있거나 작동하지 않을 것입니다.
6.내가 가지고있는 모든 브라우저 (크롬 49, 에지 (25), 파이어 폭스 (44), IE11, 사파리 5 승, 사파리 8 (맥 OS))와 함께 작동하는 쉬운 방법을 찾았습니다
내가 가지고있는 모든 브라우저 (크롬 49, 에지 (25), 파이어 폭스 (44), IE11, 사파리 5 승, 사파리 8 (맥 OS))와 함께 작동하는 쉬운 방법을 찾았습니다
// 청소 SVG 컨텐츠 (당신이 SVG의 개체를 업데이트 할 경우) // 참고 : .html 중에서 ( '') 일부 브라우저에서 SVG 작동하지 않습니다 $ ( '# svgObject') 비우 ().; 일부 개체를 추가 // . $ ( '#의 svgObject') APPEND ( '<다각형 클래스 = "svgStyle"포인트 = "10, 10 50,10 50,50 10,50 10,10"/>'); . $ ( '#의 svgObject') APPEND ( '<원 클래스 = "svgStyle"CX = "100"CY = "30"R = "25"/> "); // 매직 여기 일 : 새로 고침 DOM은 (당신은 에지 / IE와 사파리를위한 SVG의 부모를 새로 고쳐야합니다) $ ( '#의 svgContainer') HTML ($ ( '#의 svgContainer') HTML ().).; .svgStyle { 입력 : cornflowerblue을; 채우기 불투명도 : 0.2; 스트로크 폭 : 2; 뇌졸중 dasharray : 5,5; 스트로크 : 검정; } <스크립트 SRC = "https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
두 형태 (사각형 하나는 원형)가 위에 표시하는 경우 <스팬> 그것은 작동한다. 7.나는이 일을, 파이어 폭스에서 원형을 볼 수 있습니다 :
나는이 일을, 파이어 폭스에서 원형을 볼 수 있습니다 :
1) XHTML에 HTML에서 파일 이름 바꾸기
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>8.의 대답하지만 도우미 함수를 사용하여 '크리스 - 돌고래 @ 기준 자료 :
의 대답하지만 도우미 함수를 사용하여 '크리스 - 돌고래 @ 기준 자료 :
// 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);9.당신이 추가 할 필요가 문자열이 SVG이며 적절한 네임 스페이스를 추가하는 경우, 당신은 부모 XML 및 APPEND와 같은 문자열을 구문 분석 할 수 있습니다.
당신이 추가 할 필요가 문자열이 SVG이며 적절한 네임 스페이스를 추가하는 경우, 당신은 부모 XML 및 APPEND와 같은 문자열을 구문 분석 할 수 있습니다.
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))10.Bobince 의해 허용 대답 짧은, 휴대용 솔루션이다. 당신이뿐만 아니라 APPEND SVG 필요하지만, 또한 그것을 조작 할 경우, 당신은 자바 스크립트 라이브러리 "파블로을"(내가 쓴) 시도 할 수 있습니다. 그것은 jQuery를 사용자에게 친숙한 느낄 것이다.
Bobince 의해 허용 대답 짧은, 휴대용 솔루션이다. 당신이뿐만 아니라 APPEND SVG 필요하지만, 또한 그것을 조작 할 경우, 당신은 자바 스크립트 라이브러리 "파블로을"(내가 쓴) 시도 할 수 있습니다. 그것은 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');11.나는 그것을 사용 아약스에 더 좋을 수도 제안 및 다른 페이지에서 SVG 요소를로드 할 것입니다.
나는 그것을 사용 아약스에 더 좋을 수도 제안 및 다른 페이지에서 SVG 요소를로드 할 것입니다.
$('.container').load(href + ' .svg_element');어디 HREF는 SVG있는 페이지의 위치입니다. 이 방법 당신은 HTML 콘텐츠를 교체에서 발생할 수있는 과민 효과를 방지 할 수 있습니다. 또한,이 장전 후 SVG 랩을 해제하는 것을 잊지 마세요 :
$('.svg_element').unwrap();12.이것은 FF 57 오늘 나를 위해 노력하고 있습니다 :
이것은 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"); }차종 :
13.
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.14.훨씬 간단한 방법은 그냥 문자열로 SVG를 생성 래퍼 HTML 요소를 생성하고 $를 사용하여 HTML 요소에 SVG 문자열을 삽입하는 것입니다 ( "# wrapperElement"). html로 (svgString). 이 크롬과 파이어 폭스에서 잘 작동합니다.
훨씬 간단한 방법은 그냥 문자열로 SVG를 생성 래퍼 HTML 요소를 생성하고 $를 사용하여 HTML 요소에 SVG 문자열을 삽입하는 것입니다 ( "# wrapperElement"). html로 (svgString). 이 크롬과 파이어 폭스에서 잘 작동합니다.
from https://stackoverflow.com/questions/3642035/jquerys-append-not-working-with-svg-element by cc-by-sa and MIT license
'JQUERY' 카테고리의 다른 글
[JQUERY] 왜 페이지로드 즉시 클릭 이벤트 처리기 화재는 무엇입니까? (0) 2020.09.23 [JQUERY] 이미지로드에 jQuery를 콜백 (이미지가 캐시 된 경우에도) (0) 2020.09.23 [JQUERY] 어떻게입니다 onbeforeunload 대화 상자를 무시하고 내 자신으로 대체 할 수 있습니까? (0) 2020.09.23 [JQUERY] 어떻게 jQuery를 또는 일반 자바 스크립트를 사용하여 매개 변수 URL을 얻으려면? (0) 2020.09.23 [JQUERY] jQuery를하고 Ajax를 기본 인증을 사용하여 (0) 2020.09.23