나는 인터넷 검색을 시도했지만 HTML의 svg에 대한 정보는 매우 혼란 스럽습니다. 나는 꽤 복잡하거나 적어도 나를위한 시나리오를 가지고있다.요청 데이터에서 SVG를 동적으로 생성합니다.

jQuery를 사용하여 GET 요청의 응답 데이터를 기반으로 div (id="manual-regridding-image") 내에 동적으로 svg 개체를 만들지는 않을 것이다. svg에는 이미지 데이터와 다른 svg 요소가 모두 포함됩니다. GET 요청이 실패하면 div의 전체 내용이 실패 함수 내의 메시지로 설정되어야합니다. 마지막으로 이미지를 완전히 다운로드 /로드 한 후 사용자에게 내용을 표시할지 결정해야합니다.

function load_grid_svg() { 

    show_gridimage = true; 
    $.get(
     "/api/results/gridding/svg", 
     function (data) { 
      svg = document.importNode(data, true); 
      $("#manual-regridding-image").html(svg); 
     } 
    ).fail(function() { 
     $("#manual-regridding-image").html("<em>Could not find the grid image! Maybe gridding failed last time?</em>"); 
    }).always(function() { 
     if (show_gridimage) { 
      $("#manual-regridding-image").show(); 
     } else { 
      $("#manual-regridding-image").hide(); 
     } 
    }); 
}

그러나 데이터의 가져 오기가 작동하지 않습니다 : 내가 지금까지 들어 왔 무엇

이다. 이 질문은 이전에 물어봐야했던 것처럼 느껴지지만 어떤 것도 찾을 수 없습니다. 내가 제대로 역 추적을 이해한다면

편집

이는 importNode 라인에 NotSupportedError: Operation is not supported을 생산하고 있습니다.

편집이 코멘트에 @Tomalak에 의해 표시된 바와 같이

응답은 XMLDocument하고 올바르게되어야 $.get의 콜백을 표시 얻을 수 있습니다 :

function (data) { 
     $("#manual-regridding-image").append(data.documentElement); 
    }

출처

2016-09-05 deinonychusaur

어떻게 작동하지 않습니까? 무슨 일이야? –

이것은 아마도 과잉 공격 일 수 있습니다. [jQuery SVG 플러그인] (http://keith-wood.name/svg.html) –

@JosephYoung 사용해 보겠습니다. 고마워요. – deinonychusaur

는 응답이 XMLDocument 및뿐만 아니라 <svg>...</svg> 문자열입니다

아래의 예를 참조하십시오 $.get에 콜백해야한다 : ensur으로

function (data) { 
    $("#manual-regridding-image").append(data.documentElement); 
}

e div는 이 $.get -call 전에 수행되어야하는 최신 콘텐츠 만 표시합니다.

출처

2016-09-07 15:11:43 deinonychusaur

확실하지 이유를 document.importNode이 필요합니다.
$.html()을 사용하여 svg의 콘텐츠를 문서에 추가 할 수 있습니다.

확인이 예 :

svgstr = '<svg height="100" width="100"><circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" /></svg>' 
 

 
$('#btn1').click(function() { 
 
    $('#a1').append(svgstr) 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="a1"> 
 
    <span>Some Text</span><br /> 
 
</div> 
 
<button id="btn1">Click to add SVG</button>

출처

2016-09-05 15:51:58 Dekel

자바 스크립트에서 당신은 XMLHttpRequest의를 사용할 수 있고, 사업부 innerHTML을에 직접 SVG 파일에서 responseText를로드합니다. 콜백 함수는 모든로드 후 이벤트를 호출 할 수도 있습니다. div의 각 svg 요소에 대한 액세스도 제공합니다. 그래서 올바르게 표시 가야,

<!DOCTYPE HTML> 
 
<html> 
 
<head> 
 
    <title>Load SVG into DIV</title> 
 
</head> 
 
<body onLoad=callSVGfile()> 
 
<div id=mySVGdiv></div> 
 
<script> 
 
function callSVGfile() 
 
{ 
 
    /* 
 
    var SVGFile="mySVGfile.svg" 
 
    var loadXML = new XMLHttpRequest; 
 
    loadXML.onload = callback; 
 
    loadXML.open("GET", SVGFile, true); 
 
    loadXML.send(); 
 
    function callback() 
 
    { 
 
    //---responseText--- 
 
    mySVGdiv.innerHTML=loadXML.responseText 
 
    } 
 
    */ 
 
    mySVGdiv.innerHTML=loadXMLreponseText 
 

 
} 
 

 
var loadXMLreponseText='<svg xmlns="http://www.w3.org/2000/svg" id="Rose1" width="149.395" height="175.624">'+ 
 
'<polygon id="BorderPoly" fill="none" pointer-events="none" stroke="red" stroke-width="4" points="74.6978,0 46.1667,9.271 28.5328,33.542 28.5328,63.542 0.000946045,72.811 5.34058e-005,102.811 28.5328,112.083 46.1657,136.353 46.1657,166.353 74.6978,175.624 103.229,166.353 103.231,136.353 120.864,112.082 149.395,102.812 149.395,72.812 120.863,63.542 120.863,33.542 103.23,9.2705" />'+ 
 
'<g id="mainPolyG" transform=""><polygon id="mainPoly" fill="rgb(30, 144, 255)" stroke="black" stroke-width="1" points="120.863,63.542 120.863,33.542 103.23,9.2705 74.6978,0 46.1667,9.271 28.5328,33.542 28.5328,63.542 46.1657,87.812 74.6978,97.083 103.23,87.812" seed="0" /><polygon fill="rgb(255, 255, 0)" stroke="black" stroke-width="1" points="28.5328,112.083 46.1657,87.812 74.6978,97.083 74.6978,127.083 46.1657,136.353" seed="1" /><polygon fill="rgb(255, 255, 0)" stroke="black" stroke-width="1" points="74.6987,127.083 74.6978,97.083 103.23,87.812 120.864,112.082 103.231,136.353" seed="2" /><polygon fill="rgb(255, 255, 0)" stroke="black" stroke-width="1" points="120.863,112.083 103.23,87.812 120.863,63.542 149.395,72.812 149.395,102.812" seed="3" /><polygon fill="rgb(255, 255, 0)" stroke="black" stroke-width="1" points="0.000946045,72.811 28.5328,63.542 46.1657,87.812 28.5317,112.083 5.34058e-005,102.811" seed="4" /><polygon fill="rgb(237, 28, 36)" stroke="black" stroke-width="1" points="74.6978,127.083 46.1657,136.353 74.6978,145.624 103.229,136.353" seed="5" /><polygon fill="rgb(0, 255, 0)" stroke="black" stroke-width="1" points="74.6978,145.624 103.229,136.353 103.229,166.353 74.6978,175.624" seed="6" /><polygon fill="rgb(0, 255, 0)" stroke="black" stroke-width="1" points="46.1657,166.353 46.1657,136.353 74.6978,145.624 74.6978,175.624" seed="7" /></g>'+ 
 
'</svg>' 
 
</script> 
 
</body> 
 

 
</html>

코멘트에 @Tomalak에 의해 표시된 바와 같이

출처

2016-09-05 17:26:18

요청 데이터에서 SVG를 동적으로 생성합니다.

편집

편집이 코멘트에 @Tomalak에 의해 표시된 바와 같이

답변

관련 문제