根据请求数据动态创建SVG
[英]Create SVG dynamically from from request data
问题描述
I've tried googling, but information on svg in html is very confusing. 
我已经尝试使用Google搜索，但是有关html中svg的信息却非常令人困惑。 I have a quite complex, or at least for me, scenario: 我有一个非常复杂的场景，或者至少对我来说是这样：
Using jQuery I wan't to create an svg object dynamically inside a div ( id="manual-regridding-image" ) based on response data from a GET-request. 使用jQuery，我id="manual-regridding-image"根据来自GET请求的响应数据在div（ id="manual-regridding-image" ）中动态创建svg对象。 The svg will contain both image-data and other svg-elements. svg将同时包含图像数据和其他svg元素。 If the GET-request fails then the entire contents of the div should be set to the message within the fail-function. 如果GET请求失败，则div的全部内容应设置为失败功能内的消息。 Finally decision about showing the contents to the user needs to be made after the image as been fully downloaded/loaded. 最终需要在完全下载/加载图像之后做出有关向用户显示内容的决定。
What I've gotten so far is: 到目前为止，我得到的是：
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();
}
});
}
But the importing of the data doesn't work. 但是导入数据无效。 It feels like this question should have been asked before, but I can't find anything applicably. 感觉这个问题应该已经被问过，但是我找不到适用的任何东西。
Edit 编辑
This produces a NotSupportedError: Operation is not supported on the importNode line if I understand the traceback correctly. 这会产生NotSupportedError: Operation is not supported如果我正确理解了回溯，则在importNode行上NotSupportedError: Operation is not supported该NotSupportedError: Operation is not supported 。
Edit 2 编辑2
As indicated by @Tomalak in the comments, the response is an XMLDocument and to get it to correctly display the callback in the $.get should be: 如评论中@Tomalak所示，响应为XMLDocument ，为了使其正确显示$.get的回调，应为：
function (data) {
$("#manual-regridding-image").append(data.documentElement);
}
3 个解决方案
解决方案1
1 2016-09-05 15:51:58
Not sure why you need the document.importNode at all. 不确定为什么完全需要document.importNode 。
You can just use $.html() to add the content of your svg to the document. 您可以只使用$.html()将svg的内容添加到文档中。
Check this example: 检查以下示例：
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>
解决方案2
1 已采纳 2016-09-07 15:11:43
As indicated by @Tomalak in the comments, the response is an XMLDocument and not only the <svg>...</svg> string, so to get it to correctly display the callback in the $.get should be: 如注释中的@Tomalak所示，响应不仅是<svg>...</svg>字符串，而且是XMLDocument ，因此要使其正确显示$.get的回调，应为：
function (data) {
$("#manual-regridding-image").append(data.documentElement);
}
To ensure the div only shows the most recent content a $(#manual-regridding-image").empty() needs to be performed before the $.get -call. 为了确保div仅显示最新内容，需要在$.get -call之前执行$(#manual-regridding-image").empty() 。
解决方案3
0 2016-09-05 17:26:18
in JavaScript You can use XMLHttpRequest and load an svg file responseText directly into the Div innerHTML. 在JavaScript中，您可以使用XMLHttpRequest并将svg文件responseText直接加载到Div内部HTML中。 The callback function also can call any after load events. 回调函数还可以调用任何加载后事件。 This also provides access to each svg element within the div. 这也提供对div中每个svg元素的访问。
See example below: 请参见下面的示例：
<!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>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.