svg.js使用中的一个bug

最新推荐文章于 2023-02-13 11:09:22 发布
原创 最新推荐文章于 2023-02-13 11:09:22 发布 · 1.3k 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#svg-js的bug

本文探讨了SVG.js在处理带命名空间的SVG数据时存在的一个错误，该错误导致DOM节点构造错误，将兄弟节点误认为父子节点。通过定位到svg.js源码的1165行并修正正则表达式，可以成功修复此bug。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

关于SVG.js解析带命名空间的svg数据生成dom节点错误的bug

  • 错误实例
  • bug修正

svg数据：

  <cge:PSR_Ref ObjectID=""  GlobeID="000"/>
  <cge:Layer_Ref ObjectName="ss"/>

调用svg.js中的svg(“svg数据”)方法加载svg图形;

生成的dom节点：

<cge:PSR_Ref ObjectID=""  GlobeID="000"</
最低0.47元/天 解锁文章

200万优质内容无限畅学
d3.js 利用svg绘制水球图（d3.v3.js和d3.v5.js）
uncle_Huang的博客
06-30 1042
水球图d3.js官网有现成的例子，可以直接拿来用，只不过引用的是d3.v3.js，如果想用d3.v5.js绘制水球图，就得稍微改一下。 d3.js官网 指南->官方画廊->水球图(Liquid Fill Gauge) 或者直接点击水球图实例 1、d3.v3.js绘制的水球图实例 index.html <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> &
svg 获取元素_克隆SVG元素：使用
cungui5726的博客
08-24 983
svg 获取元素use is SVG’s clone tool: it allows you to duplicate and replicate existing or predefined elements, while also providing the possibility of applying changes to the cloned copies. use is an easy...
【SVG.js】元素【未完成】
小迷糊
09-15 1108
SVG.Dom 是 svg.js 创建的所有 dom 元素的基础原型。svg.js 允许通过 attr() 方法或调用诸如 move() 之类的专用方法来更改属性。大多数情况下这是 HTML，并与 SVG() 一起使用以向其中添加 html 元素。SVG.Container 类是可以包含其他元素的所有元素的基本包装器。对于 SVG.js 未描述的所有元素，SVG.Dom 类也可以派上用场。要创建一个新的 SVG.Svg 文档，只需调用 SVG()要从标记创建元素，您还可以使用 SVG()
js_xpath_搞不定的东西
weixin_34410662的博客
02-25 116
1、 svg 图片 中 2、 类似这样的节点： <metadata> 　　<cge:Layer_Ref ObjectName="BranchLayer"/> 　　<cge:PSR_Ref ObjectID="LoadBreakSwitch_1111277770" ObjectName="4#开关"/> </metadata> ...
SVG语法标签属性解释手册
NeverSayNever
05-08 1406
转自：http://www.fx114.net/qa-70-128815.aspx 转自：http://blog.csdn.net/xuezhimeng/article/details/5595959 1. SVG元素模块 Animation.Module animate animateColor animateTransform animateMotion set m
svg.js使用教程
IT飞牛
02-13 9353
在日常web开发过程中，我们会需要显示一些图形化的元素，使用div+css、ps图片是常见的实现方式。但使用svg来绘制可能更加合适，SVG是，有一些预定义的形状元素，可被开发者使用和操作： 矩形(rect)、 圆形(circle)、 椭圆(ellipse)、 线(line)、 折线(polyline)、 多边形(polygon)、 路径(path)。svg可以是独立的*.svg文件，可以通过来引入。也可以直接将svg代码写入html中，开发和使用起来非常灵活。本教程主要介绍svg.js。
Next.js项目中svg-sprite-loader的使用与bug示例分析
在React项目中，尤其是使用Next.js时，SVG精灵技术可以用来合并多个SVG图标到一个单一的SVG文件中，这样可以减少HTTP请求的数量，提高性能。但在某些情况下，可能会遇到与Next.js结合使用时的bug，本示例项目可能...
Textures.js：一个强大的SVG图案生成JavaScript库
资源摘要信息:"Textures.js是一个专门用于创建SVG模式的JavaScript库，它适用于数据可视化领域的图形设计。这个库通过提供一系列工具和接口，使得开发者能够方便地在Web页面上生成和操作SVG模式，进而实现更丰富的...
jquery.svg3dtagcloud.min.js
最新发布
09-08
标签云旋转js
PSR规范的含义-新手必懂
qq_39136073的博客
08-15 1512
04是自动加载的规范， 12是代码规范， 3是日志规范，后面的数字就是升级版 PSR 是 PHP Standard Recommendations 的简写，由 PHP FIG 组织制定的 PHP 规范，是 PHP 开发的实践标准。 项目的目的在于：通过框架作者或者框架的代表之间讨论，以最低程度的限制，制定一个协作标准，各个框架遵循统一的编码规范，避免各家自行发展的风格阻碍了 PHP 的发展，解...
dom4j_01_01
weixin_33736048的博客
12-07 103
1、 使用的svg图形为：“FZX069A开关站图_V1.svg”，内容为： 1 <?xml version="1.0" encoding="UTF-8"?> 2 <svg width="5650" height="2850" viewBox="0 0 5650 2850" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="...
chrome对svg的缩放有bug
莫冲的专栏
01-12 298
http://groups.google.com/group/google-chrome-frame/browse_thread/thread/8b32568e6cf93452/ed2a45ac49ee9833?#ed2a45ac49ee9833 svgRoot.currentScale * 0.67; 这样直接在js中操作是无效的。若放在svg标签里面的，则生效。 demo http:/...
SVG动态添加元素与事件
热门推荐
超频化石鱼的博客
02-09 1万+
SVG文件是由各个元素组成。元素由标签定义，而标签格式即html的元素定义格式。但是载入一个SVG文件，却无法通过常规的js获取对象方式来获取到SVG中定义的元素，更无法通过这种方式来动态添加SVG元素与事件。SVG元素的操作都要借助于SVG的document对象。SVG的document对象获取方式为：svgDoc = document.getElementById("mySVG").getSV...
object 加载svg文件，通过js修改属性
weixin_42390878的博客
12-20 4213
js: var sObject = document.getElementById("svgObject"); sObject.addEventListener("load",function() { var svgg = sObject.getSVGDocument(); var svgDoc = sObject.contentDocument; ...
用js在页面中创建svg标签不显示的问题
yiyueqinghui的博客
08-14 5140
问题描述 直接在页面写入SVG,图形正常可以显示， 但是使用js动态创建SVG，添加入DOM节点，页面无法显示SVG图形 原因 SVG是基于XML格式定义图像的一种技术，因此创建节点的时候，需要指定命名空间（Namespace），也就是用createElementNS来代替createElement创建节点 封装的js创建svg的方法 思路如下： 1、通过document.getElementById根据元素ID来获取这个容器对象 2、使用document.createElementNS创建一个带http
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值