svg webtopo原型（1）基本功能

最新推荐文章于 2025-05-28 09:00:02 发布
最新推荐文章于 2025-05-28 09:00:02 发布
阅读量1.7k 收藏 2
点赞数
CC 4.0 BY-SA版权
分类专栏： web编程 svg 脚本学习 文章标签： opera javascript encoding html5 ie 测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/laputa73/article/details/7681690
本文介绍了使用SVG作为HTML5标准来创建WebTopo原型的过程。作者在克服已有开源包的相似功能阻力后，逐步实现了文本和线条的基本功能，特别关注了IE和Opera的兼容性，包括中文显示的支持。主要内容包括文本、线条的显示以及JavaScript操作的简单封装。提供了测试页面链接和相关资源。

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

考虑到svg也是html5的标准之一，考虑继续抽空把svg的topo原型移植完。

阻力：已经有webtopology开源包了，实现的功能基本类似

 

参照vml模型的顺序，先实现基本的文本和画线功能。

之前在前期探索中，已经完成了画矩形、画线的探索，包括ie/opera的兼容，中文处理等。因此基本功能还算顺利。

主要实现文本、线条的显示。

以及基本的js操作的简单封装。

兼容

最低0.47元/天 解锁文章

200万优质内容无限畅学
svg webtopo原型4-图片的动态显示
laputa73的专栏
07-03 2621
这个例子是测试设备的显示。 主要就是用g来包含图片和文本。 这块遇到的困难有点超出想象。 开始创建的image对象怎么也无法显示。 但是生成的源码另存后是可以显示的。 百般不解。 最后还是通过分析webtopology的源码发现， Image的连接必须写成 image.setAttributeNS("http://www.w3.org/1999/xlink","href",imag
svg webtopo原型2基本功能，缩放
laputa73的专栏
06-21 1524
接下来要实现缩放功能，就有了很多的曲折，耗费的时间超出预期。 理论上讲，svg已经经过了xm标准化，可以和dhtml溶为一体了，实际上还是有一些差距的。 ie 的adobe svgviewer就更不用说了，早停止更新了。但是它的功能还是很不错的，怀念啊 Opera上不支持ASV插件的部分功能，例如查看源码、缩放等。 当然svg本身是支持缩放的，方法不只一种。 可以用viewbox,也可以
WebTopo:基于VUE的web组态（组态，拓扑图，拓扑编辑器）
05-10
WEB组态 基于vue+quasar的web组态，核心代码基于vue，quasar仅仅是为了方便构建 预览地址： github预览地址： 更新日志 后续重点TODO 完善撤销和恢复 折线箭头（思路：增加控制锚点作为转折点） 属性元数据设计和属性编辑UI生成（思路：仿造winform的属性面板） 功能清单 功能 状态 面板标尺 完成 拖曳添加组件 完成 位置移动-鼠标 完成 位置移动-方向键 完成 位置移动-批量 完成 拖动位置磁性吸附 未完成 尺寸锚点（8个） 完成 旋转锚点 未完成 选中效果 完成 层叠控制 完成 面板比例缩放 完成 CTRL+C/V复制黏贴 完成 CTRL+A多选 完成 鼠标框选 完成 DELETE删除（支持删除多个） 完成 样式配置（文字、大小、位置、边框、颜色、旋转） 完成 组件继承体系 完成 DOM组件（文字、图片） 完成 canvas组件（圆形、三角形、矩形、线
Web_topo：构建可视化交互的利器
最新发布
gitblog_00910的博客
05-28 383
Web_topo：构建可视化交互的利器 项目介绍 Web_topo 是一款基于 Vue 和 Quasar 框架开发的 Web 组态工具。它提供了丰富的图形组件和交互功能，使得用户可以轻松构建具有高度定制化和可视化交互的 Web 应用程序。Web_topo 的设计理念是为开发者提供一套简单易用、功能强大的组态解决方案，以实现复杂的业务场景和数据处理。 项目技术分析 Web_topo 的核心技术建立在...
【亲测免费】 Vue-WebTopo-SVGEditor：下一代SVG图形编辑器的创新实践
gitblog_00043的博客
03-27 1622
Vue-WebTopo-SVGEditor：下一代SVG图形编辑器的创新实践 项目简介 是一个基于 Vue.js 框架开发的Web端SVG图形编辑器，它提供了丰富的图形绘制和编辑功能，旨在为开发者提供一个易于集成、高度可定制化的SVG图形设计解决方案。无论是网络拓扑图、流程图还是其他复杂的矢量图形，Vue-WebTopo-SVGEditor都能轻松应对。 技术解析 该项目的核心采用了 SVG（Sc...
svg画圆（矢量图）
sally18的博客
11-28 1582
https://blog.youkuaiyun.com/chy555chy/article/details/53333422 svg用法介绍
【亲测免费】 探索WebTopo：一款强大的网络拓扑图绘制工具
gitblog_00058的博客
04-19 2500
探索WebTopo：一款强大的网络拓扑图绘制工具 是一个基于Web的开源项目，旨在帮助网络管理员、开发者和爱好者轻松地创建和管理网络拓扑图。这个工具以其直观的界面和丰富的自定义功能，提供了网络可视化的新途径。 技术分析 前端框架：WebTopo构建于现代化的前端框架React之上，确保了良好的性能和用户体验。 图形库：利用D3.js库进行数据驱动的图形渲染，使得网络设备、链路等元素能够动态...
vue-webtopo-svgeditor:纯vue3实现的svg可视化web布局编辑器。主要用于物联网mqtt实时系统图
03-21
vue-webtopo-svgeditor 纯vue3实现的svg可视化web布局编辑器。主要用于物联网mqtt实时系统图 预览地址 如何使用 # 克隆项目 git clone https://github.com/yaolunmao/vue-webtopo-svgeditor.git # 进入项目目录 cd ...
绘制svg绘图工具,具有绘图得基本功能
05-22
尤其是具备基本功能的绘图工具，它们为用户提供了创建和编辑矢量图形的强大能力，其中SVG（Scalable Vector Graphics）格式因其可伸缩性、高质量和易于网络使用的特性而广受欢迎。本文将详细探讨一个专注于SVG绘图的...
世界266个国家的国旗 SVG 图标1X1和 4x3 全球国家国旗svg格式 国家svg图
08-16
世界所有国家的国旗 SVG 图标 共266国家 1X1和 4x3 格式 文件命名为 国家缩写 （ad.svg）
draw一个简单的SVG绘图板
08-11
一个简单的SVG绘图板。 这个应用程序只是一个SVG开发的学习体验。
基于C#的web topo源代码
11-30
C#开发的WEB网页TOPO图~完整~易懂~
Web 网络拓扑图
iteye_12279的博客
07-20 868
我们做的网管产品中有实时的网络拓扑图（二层三层自动拓扑展示）这个功能,我们目前是c/s的， 现在要改成在web上实时的展示网络拓扑图。我们考虑用开源软件（extjs， YUI等）， 也考虑用Flex。但实现起来都有点难度，而且要做得漂亮，有3D效果有点挑战。 TWaver不错但太贵. 有这方面经验的朋友,请给点建议。我们也希望聘请个高手做我们的顾问。 ...
VML实现WEB Topo原型（1）
laputa73的专栏
03-09 1000
原本不打算再研究vml了，不过经历了一年的徘徊，还是决定再回头研究一下理由：1.       不需要插件，IE天然支持，和js结合好。不用学新语言。2.       矢量。支持3D。3.       有现成的webtopo源代码可以研究计划：用vml实现一个简单的topo 发现的前端展示页面对于前端需求大致有：1.图片显示设备，线显示连接2.可以关联拖放3.
WebTopo 组态软件+ARM 工业计算机：重塑污水处理
weixin_49512855的博客
09-04 1069
无论是污水的流入、处理过程中的各个环节，还是处理后的排放，都能在 WebTopo 的界面上清晰呈现。当系统出现问题时，操作人员可以迅速定位故障点，及时采取措施进行修复，大大缩短了故障处理时间，提高了系统的稳定性。通过对历史数据的分析，操作人员可以了解系统的运行规律，预测可能出现的问题，提前采取措施进行防范。它具有强大的计算能力和稳定的性能，能够在恶劣的工业环境下长时间运行。WebTopo 组态软件与 ARM 工业计算机的结合，尤其是 ARMxy 工业树莓派在污水处理中的应用，为这个领域带来了全新的变革。
通过WebTopo在ARMxy边缘计算网关上实现系统集成
BLiiot的博客
09-24 783
BL340系列是基于全志科技T507-H处理器设计的高性能工业级ARM控制器，采用四核ARM Cortex-A53架构，最高主频可达1.4GHz，配备8/16GB eMMC存储及1/2GB DDR4内存。该系列控制器不仅具备强大的数据处理能力，还支持多种通信接口（如RS-232/485, CAN, Ethernet, Wi-Fi, 4G/5G等），能够灵活适应各种工业环境，广泛应用于工业边缘计算、智能物联网关、充电桩管理等多个领域。
【亲测免费】 Vue-WebTopo-SVGEditor 安装和配置指南
gitblog_07930的博客
09-13 1030
Vue-WebTopo-SVGEditor 安装和配置指南 1. 项目基础介绍和主要编程语言 项目基础介绍 Vue-WebTopo-SVGEditor 是一个基于 Vue.js 框架开发的 Web 端 SVG 图形编辑器。它提供了丰富的图形绘制和编辑功能，旨在为开发者提供一个易于集成、高度可定制化的 SVG 图形设计解决方案。无论是网络拓扑图、流程图还是其他复杂的矢量图形，Vue-WebTopo-...
通过WebTopo在ARMxy上实现数字化转型的可视化解决方案
weixin_40993663的博客
08-31 185
随着工业4.0的迅猛发展，企业对于实时数据监控、设备管理和智能化生产的需求日益增加。为了满足这些需求，WebTopo与ARMxy携手推出了一套高效、灵活的数字化转型可视化解决方案。本文将详细介绍WebTopo软件、钡铼ARMxy系列BL340嵌入式计算机，并探讨它们如何共同支持数字化转型。一、WebTopo软件简介WebT...
C#开发的SVG封装类库SharpVectorGraphics功能综述
描述中提到的“功能强大”表明SharpVectorGraphics不仅仅是一个简单的SVG解析器或渲染器，它可能包括了丰富的功能，如支持SVG的所有标准特性、拥有高效的图形渲染引擎、提供了丰富的API用于创建和修改SVG图形、支持...
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值