ajax 请求svg,jQuery append 到AJAX加载的SVG问题
我已成功通过AJAX从外部文件加载了一些svg:$("#svg").load(svgUrl + " svg", function() {
// do stuff
});
我的HTML看起来像这样:
...
我可以看到图形很好。现在,我想向已加载的svg添加一些其他svg元素。我将脚本更改为:
$("#svg").load(svgUrl + " svg", function() {
$("svg").append("");
// do stuff
});
由于某些原因,添加的元素在Firebug中显示为隐藏,并且无论我放入其中的xml如何,都无法在网页上看到它。
更新:
多亏了echo-flow,我能够 append 到我的SVG中。现在,如果我尝试从另一个xml文件加载指南针svg,它不会出现在我的DOM中。目前,我的代码如下所示:
$("#svg").load(obj.svgUrl + " svg", function() {
var svgns = "http://www.w3.org/2000/svg";
var g = document.createElementNS(svgns,"g");
g.setAttributeNS(null,'id','compass');
$("svg").append(g);
$("#compass").load("files/svg/compass.xml");
});
如果我在Firebug的控制台中查看,我会看到AJAX指南针标记请求的结果是成功的,但为空。
最佳答案
jQuery并不是真正为了解XML namespace 而构建的,因此很可能会解析字符串"",以使生成的DOM节点位于默认 namespace (而不是SVG namespace )中。您可以通过使用常规DOM创建节点来解决此问题。如下所示:svgns = "http://www.w3.org/2000/svg"
$("#svg").load(svgUrl + " svg", function() {
var g = document.createElementNS(svgns,"g");
g.setAttributeNS(null,'id','compass');
$("svg").append(g);
//do stuff
});
如果您需要创建更复杂的结构,则建议您查看jquery-svg库,该库具有用于生成SVG DOM的更简洁的API。
更新了
我误解了您正在尝试加载SVG文档并将其 append 到您的宿主HTML文档中-相反,我认为您正在尝试使用脚本生成SVG。为了解决您的问题,我建议您执行以下操作(未经测试,但应该可以):
//get the SVG document using XMLHTTPRequest
$.get(svgUrl + " svg",
function(svgDoc){
//import contents of the svg document into this document
var importedSVGRootElement = document.importNode(svgDoc.documentElement,true);
//append the imported SVG root element to the appropriate HTML element
$("#svg").append(importedSVGRootElement);
},
"xml");
关于jQuery append 到AJAX加载的SVG问题,我们在Stack Overflow上找到一个类似的问题:
https://stackoverflow.com/questions/6802283/
ajax 请求svg,jQuery append 到AJAX加载的SVG问题相关推荐
- jquery的ajax全局事件和AJAX 请求正在进行时显示“正在加载”
实例 当 AJAX 请求正在进行时显示"正在加载"的指示: $("#txt").ajaxStart(function(){$("#wait" ...
- svg html5 ajax,jQuery附加到AJAX加载的SVG问题
我通过 AJAX从外部文件成功加载了一些svg: $("#svg").load(svgUrl + " svg",function() { // do stuff ...
- C语言界面列表的滑动效果,jQuery+ajax实现滚动到页面底部自动加载图文列表效果(类似图片懒加载)...
本文实例讲述了jQuery+ajax实现滚动到页面底部自动加载图文列表效果.分享给大家供大家参考,具体如下: /p> "http://www.w3.org/TR/xhtml1/DTD/ ...
- 点击按钮重新加载ajax,Jquery AJAX点击链接,然后重新加载页面
我审查了其他帖子和一些帮助我,但因为我不精通JQuery或AJAX,我想确保我正在做我需要正确的.Jquery AJAX点击链接,然后重新加载页面 在我的主页(基本URL)上,我有2个不同的输出,基于 ...
- ajax下拉 加载 下一页,jQuery滑动到底部加载下一页数据的实例代码
page_num =page_num+1 ; //页码自动增加,保证下次调用时为新的一页. $.ajax({ type: "get", url: rent_url, data: ' ...
- Php ajax 动态 下载,jQuery动态实现ajax文件下载
这次给大家带来jQuery动态实现ajax文件下载,jQuery动态实现ajax文件下载的注意事项有哪些,下面就是实战案例,一起来看一下.// Ajax 文件下载 jQuery.download = ...
- html ajax请求怎么用,如何使用ajax,ajax请求的五个步骤
有很多童鞋,在WEB前端面试的时候,常会被Ajax问题难住,其实Ajax没有你们理解的那么难,现在源码时代H5学科讲师带着大家重新来回顾一下知识点:随便再给大家普及一下小常识,今天咱们聊的就是怎么快速 ...
- echarts asp mysql 源码_如何使用PHP+jQuery+MySQL实现异步加载ECharts地图数据(附源码下载)...
ECharts地图主要用于地理区域数据的可视化,展示不同区域的数据分布信息.ECharts官网提供了中国地图.世界地图等地图数据下载,通过js引入或异步加载json文件的形式调用地图. 本文将结合实例 ...
- jquery实现页面等待加载“转圈圈”效果
jquery实现页面等待加载"转圈圈"效果 A little of BB:看了不少前端框架,寻思着自己diy封一个加载转圈圈的效果,以后在项目上节省时间("懒" ...
最新文章
- DL之GRU:GRU算法相关论文、建立过程(基于TF)、相关思路配图集合、TF代码实现
- html的换行问题(未解决)
- python的数据结构包括那些_python算法与数据结构-什么是数据结构
- qt xml组包_Qt 利用XML文档,写一个程序集合 二
- 基于Session的认证方式_实现认证功能_Spring Security OAuth2.0认证授权---springcloud工作笔记116
- 2000条你应知的WPF小姿势 基础篇40-44 启动关闭,Xaml,逻辑树
- Windows 重装系统后 开发环境配置 软件安装列表
- pc套件 无法连接pc CDC Comms Interface
- 深度学习模型知识产权保护怎么做?看看IJCAI 2021这场Workshop说了什么
- Kubernetes:应用部署、应用了解、应用公布、应用伸缩,-image=ikubernetes/myapp:v1
- 将数字字符转换成整型数字
- 《左手数据,右手图表》
- Quasi Recurrent Neural Network (QRNNs) (git待更新...)
- 《子夜秋歌》赏析-(李白明月姑娘之六)
- 概率漫谈 转自 林达华
- android 组件透明,万能小组件透明小组件-万能小组件透明背景设置v1.0.0 安卓版_永辉资源网...
- 火车头采集翻页内容_火车头采集:内容替换支持[参数],标签
- 看网页说服务器走丢了,真不巧网页走丢了是什么意思?360浏览器打不开网友原因解析...
- 戴尔latitude D630电脑U盘装win10图文详解
- java fatal exception_如何解决FATAL EXCEPTION:pool-4-thread-1错误?
热门文章
- uboot源码——主Makefile分析
- AWR报告中Top 10 Foreground Events存在”reliable message”等待事件的处理办法
- matlab中的qr函数
- 【Ubuntu】ubuntu系统下python3和python2环境自由切换
- Attempt to write to a read-only database Sqlite
- ubuntu6.06容易死机的一种解决方法
- 使用epoll+时间堆实现高性能定时器
- 第4章 第三节 内核同步
- CSDN编程挑战(交换字符)
- oracle入库的速度能到多少_多线程能提高Oracle的入库速度吗