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/

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/472317.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

微信开发学习日记(一):快速阅读5本书,掌握整体背景

2015年1月开始学习微信开发。已经有多年开发经验了,从网上文章来看,微信开发主要是接口,然后是业务逻辑,不是很难。所以,我比较强调学习效率。一天学一点,是不能满足我的快速学习欲望的。在京东上&#xff…

python json序列化对象_Python学习之json序列化

一、什么是序列化在我们存储数据或者网络传输数据的时候,需要对我们的对象进行处理,把对象处理成方便存储和传输的数据格式。这个过程叫序列化,不同的序列化结果也不同,但目的是一样的,都是为了存储和传输在Python中三…

c语言中把一个数缩小十倍_C语言实例第04期,在控制台打印出著名的杨辉三角...

点击上方“C语言中文社区”,选择“设为星标★”技术干货第一时间送达!往期回顾:C语言实例第01期,十进制数转换二进制数C语言实例第02期,判断某一年是否为闰年C语言实例第03期,使用*打印平行四边形实例代码/…

LeetCode 1838. 最高频元素的频数(二分查找)

文章目录1. 题目2. 解题1. 题目 元素的 频数 是该元素在一个数组中出现的次数。 给你一个整数数组 nums 和一个整数 k 。 在一步操作中,你可以选择 nums 的一个下标,并将该下标对应元素的值增加 1 。 执行最多 k 次操作后,返回数组中最高频…

wafer小程序服务器,Wafer - 企业级微信小程序全栈方案

Wafer 服务端 SDK - C#本项目是 Wafer 组成部分,以 SDK 的形式为业务服务器提供以下服务:SDK 获取本项目遵守 MIT 协议,可以直接下载 SDK 源码进行修改、编译和发布。如果使用自动部署并选择 C# 语言,则分配的业务服务器里已经部署…

Android学习按键事件监听与Command模式

Android学习按键事件监听与Command模式 - Dufresne - 博客园 Android学习按键事件监听与Command模式 一 Command模式 意图: 将一个请求封装为一个对象,从而使你可用不同的请求对客户进行参数化; 对请求排队或记录请求日志,以及支持…

postek二次开发_20190626_二次开发BarTender打印机_C#代码_一边读取TID_一边打印_打印机POSTEK...

demo代码如下:private void btnPrint_Click(object sender, EventArgs e){if (this.btnPrint.Text "停止打印"){SetBtnPrintUIEnable();return;}//禁用界面上的相关按钮SetBtnPrintUIDisable();var dt new DataTable();new Task(() >{///开始的打印//1. 获取选中…

fileinputstream_从Java中的FileInputStream读取字节

以下示例显示了如何从Java中的FileInputStream读取字节。import java.io.File;import java.io.FileInputStream;public class fileInputStream {public static void main(String[] args) {byte[] data new byte[1024]; //allocates memory for 1024 bytes//be careful about h…

LeetCode 1839. 所有元音按顺序排布的最长子字符串(滑动窗口)

文章目录1. 题目2. 解题1. 题目 当一个字符串满足如下条件时,我们称它是 美丽的 : 所有 5 个英文元音字母(a ,e ,i ,o ,u)都必须 至少 出现一次。这些元音字母的顺序都必须按照 字…

安川服务器显示run电机没电,安川变频器启动不运行是什么原因

即使按操作器的 RUN 键或输入外部运行信号,电机也不按照指令旋转? 电机不旋转变频器非驱动模式 确认 LED 操作器的 DRV 指示灯是否点亮。? 请操作 LED 操作器,进入驱动模式。(参照 77 页)按了 LO/RE 功能选择键(从控制回路端子输入指令时)在变频器停止…

EhLib TitleButton SVisibleColumnsEh = '错误的列';

unit EhLibConsts; interface resourcestring SClearSelectedCellsEh 清除选择的单元?; SInvalidTextFormatEh 错误的文本格式; SInvalidVCLDBIFFormatEh 错误的 VCLDBIF 格式; SErrorDuringInsertValueEh 插入值过程中出错:; SIgnoreErrorEh 忽略错…

python rpc webservice_PythonXMLRPC服务器端和客户端实例

一、远程过程调用RPCXML-RPC is a Remote Procedure Call method that uses XML passed via HTTP as a transport. With it, a client can call methods with parameters on a remote server (the server is named by a URI) and get back structured data. This module suppor…

python是动态_1.2. Python是动态语言

python是动态语言 1. 动态语言的定义 动态编程语言 是 高级程序设计语言 的一个类别,在计算机科学领域已被广泛应用。它是一类 在运行时可以改变其结构的语言 :例如新的函数、对象、甚至代码可以被引进,已有的函数可以被删除或是其他结构上的…

特征处理

学自 极客时间 《深度学习推荐系统实战》 特征分为两类: 类别特征(性别、地理位置、季节、天气、风格)数值型特征(年龄、收入、点击量、点击率) 类别特征经过 One-Hot 编码后放入特征向量、或者 多个的特征值采用 M…

C#整理1——进制转换

进制转换:二进制,八进制,十进制,十六进制。 (一)二进制转十进制: 1.写2 2.标指数,从右向左,从0开始依次标记 3.乘系数,一一对应。 4.相加。 例:二…

matlab打开笔记本摄像头_基于MATLAB调用电脑摄像头获取视频和图像

clear all;hwaitbar(0.1,请等待);%waitbar的作用是打开或者更新进度条 h waitbar(x,message)x表示进度条的比例长度,message是在进度条上显示的信息global vid;% global 的作用是定义全局变量vid videoinput(winvideo,1);close(h);preview(vid);%得到预览下的默认…

WIN 10 安装 Hadoop 2.7.7 + Spark 2.4.7 记录

文章目录0. 常规解压安装,并添加环境变量1. 下载并覆盖 bin 文件夹2. 使VERSION文件的clusterID一致3. 贴下单机配置4. 测试 Hadoop5. 安装Spark环境:win 10 java 1.8.0_281 Scala 2.11.11 Hadoop 2.7.7 Spark2.4.70. 常规解压安装,并添加…

ios验证邮箱格式

今天做注册界面时,用户在输入邮箱账号后,我不知道如何去辨别用户是否输入有误,我回想起最初我学过一个叫做"正则表达式"的方法, 但是不知道苹果是否能做到,果断的上网查找了一些相关资料。 最简单的就是利用…

canal mysql从库_canal中间件|数据增量同步解决方案

上一文中提到延时双删等策略实现数据一致性的时候,可能存在删除缓存失败的情况,就会出现缓存和数据库不一致的问题。为了应对删除缓存失败而导致数据不一致的问题,可以通过回溯数据库日志文件,提供一个保障的重试机制即可。流程如…

dbscan聚类算法matlab_密度聚类DBSCAN、HDBSCAN(转)

# 密度聚类DBSCAN、HDBSCANDBSCANDBSCAN(Density-Based Spatial Clustering of Applications with Noise,具有噪声的基于密度的聚类方法)是一种基于密度的空间聚类算法。该算法将具有足够密度的区域划分为簇,并在具有…