vue 展示svg矢量图可缩放拖动

使用插件:svg-pan-zoom

在这里插入图片描述

<template>
<!--  svg图--><div id="svgContainer"></div>
</template><script>
import svgPanZoom from 'svg-pan-zoom'
import svgFile from '../datav/img/220kVscb.svg' // 路径根据实际情况调整
export default {name: 'svgImage',data () {return {}},mounted () {this.$nextTick(() => {const svgContainer = document.getElementById('svgContainer')// 创建一个新的object元素来加载SVG文件const svgElement = document.createElement('object')const height = svgContainer.clientHeightsvgElement.type = 'image/svg+xml'svgElement.data = svgFilesvgElement.width = '100%'svgElement.height = height - 20// 将SVG元素添加到容器中svgContainer.appendChild(svgElement)// 等待SVG加载完成后再初始化svg-pan-zoom插件svgElement.onload = () => {const panZoom = svgPanZoom(svgElement, {zoomEnabled: true,controlIconsEnabled: true})// 当组件销毁时,记得清理资源this.$once('hook:beforeDestroy', () => {panZoom.destroy()})}})}
}
</script><style lang="less"></style>

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

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

相关文章

go-zero 实战(1)

环境准备 go 版本 go version go1.22.2 linux/amd64 goctl 安装 goctl&#xff08;官方建议读 go control&#xff09;是 go-zero微服务框架下的代码生成工具。使用 goctl 可以显著提升开发效率&#xff0c;让开发人员将时间重点放在业务开发上&#xff0c;其功能有&#xff1a…

关于我转生从零开始学C++这件事:升级Lv.25

❀❀❀ 文章由不准备秃的大伟原创 ❀❀❀ ♪♪♪ 若有转载&#xff0c;请联系博主哦~ ♪♪♪ ❤❤❤ 致力学好编程的宝藏博主&#xff0c;代码兴国&#xff01;❤❤❤ OK了老铁们&#xff0c;又是一个周末&#xff0c;大伟又来继续给大家更新我们的C的内容了。那么根据上一篇博…

uniapp中使用mockjs模拟接口测试总结(swiper轮播图示例)

完整总结下在uni-app中如何使用Mock.js模拟接口测试&#xff0c;这在后台接口未就绪的情况下非常有用。同时也给出个首页swiper轮播图的mock接口使用。网上的文章都不太完整&#xff0c;这里总结下完整的使用示例&#xff0c;同时也支持h5和小程序平台&#xff0c;分享给需要的…

OrangePi AIpro初体验:开启嵌入式开发之旅

概述 随着物联网和智能设备时代的到来&#xff0c;单板电脑因其独特的优势成为创新项目和教育实践的重要工具。在众多单板电脑中&#xff0c;香橙派以其出色的性能和亲民的价格&#xff0c;十分吸引博主这初涉嵌入式开发的新手。博主有幸被CSDN邀请对OrangePi AIpro进行测评。…

QT学习(20):QStyle和自定义样式

QStyle 样式&#xff08;继承自QStyle类&#xff09;代表控件的绘制并封装GUI的外观。QStyle是一个封装了GUI外观的抽象基类。Qt使用QStyle去执行几乎所有的内置控件的绘制&#xff0c;确保控件外观和原生控件风格风格相同。 class Q_WIDGETS_EXPORT QStyle : public QObject{…

区块链技术和应用二

前言 学习长安链的一些基本原理 官网&#xff1a;长安链开源文档 b站课程&#xff1a;区块链基础与应用 一、共识算法 1.1 POW工作量证明 最长链共识&#xff0c;没听明白 1.2 51%攻击 二、区块链的发展 2.1 区块链1.0到3.0 2.2 共有链、联盟链、私有链 2.3 发展趋势 2.4 扩…

2024年4月—马克思主义基本原理概论真题及答案解析(上海自考)

目录 1.选择题 2.简答题 3.论述题 1.选择题 2.简答题

MagicLens:新一代图像搜索技术和产品形态

MagicLens&#xff1a;Self-Supervised Image Retrieval with Open-Ended Instructions MagicLens: 自监督图像检索与开放式指令 作者&#xff1a;Kai Zhang&#xff0c; Yi Luan&#xff0c; Hexiang Hu&#xff0c; Kenton Lee&#xff0c; Siyuan Qiao&#xff0c; Wenhu …

C# 泛型函数

1.非约束 using System; using System.Collections.Generic; using System.Linq; using System.Text; using System.Threading.Tasks;namespace MyGeneirc {public class GeneircMethod{/// <summary>/// 泛型方法解决&#xff0c;一个方法&#xff0c;满足不同参数类型…

我的心情JSP+Servlet+JDBC+MySQL

系统概述 本系统采用JSPServletJDBCMySQL技术进行开发&#xff0c;包括查看我的心情列表&#xff0c; 编辑我的心情信息、新增我的心情。使用方法 将项目从idea中导入&#xff0c;然后配置项目的结构&#xff0c;包括jdk,库&#xff0c;模块&#xff0c;项目&#xff0c;工件…

他用AI,抄袭了我的AI作品

《大话西游》里面有一句经典台词&#xff1a;每个人都有一个妈&#xff0c;但是“你妈就一定是你妈吗&#xff1f;” 用AI创作的艺术作品&#xff0c;也走进类似的困境&#xff1a;如何证明你用AI生成的作品&#xff0c;就是你的作品&#xff1f; 近日&#xff0c;腾讯科技独…

信息学奥赛初赛天天练-14-阅读程序-字符数组、唯一分解定理应用

更多资源请关注纽扣编程微信公众号 1 2019 CSP-J 阅读程序1 (程序输入不超过数组或字符串定义的范围&#xff1b;判断题正确填√,错误填&#xff1b;除特殊说明外&#xff0c;判断题1.5分&#xff0c;选择题3分&#xff0c;共计40分) 1 输入的字符串只能由小写字母或大写字母组…

Rust最新版安装(v1.78.0+)

系统&#xff1a;Windows 11 专业版 23H2rustc&#xff1a;1.78.0 配置环境变量和设置配置文件 新建文件夹“C:\Rust\Rustup”和“C:\Rust\Cargo”。【以管理员身份运行】打开CMD 设置系统环境变量&#xff0c;如下设置RUSTUP_DIST_SERVER&#xff0c;其余同理 C:\Windows\S…

shell脚本的基础应用

规范脚本的构成 #&#xff01;/bin/bash # 注释信息 可执行的语句 执行脚本的方法 有1.添加x权限 ,绝对路经&#xff0c;或者相对路径2. 使用解释器 不需加x,root...bash...bash..echo 3,用source&#xff0c; 开机root ...bash ...echo bash -x /opt/test01.sh &#xff…

蓝桥杯备赛——DP续【python】

一、小明的背包2 试题链接&#xff1a;https://www.lanqiao.cn/problems/1175/learning/ 输入示例 5 20 1 6 2 5 3 8 5 15 3 3 输出示例 120 问题分析 这题是完全背包&#xff0c;每个物品有无数个&#xff0c;所以对于任意dp[i][j]&#xff08;其表示的意思为选到第i个…

2005-2022年各省全体居民人均可支配收入数据(无缺失)

2005-2022年各省全体居民人均可支配收入数据&#xff08;无缺失&#xff09; 1、时间&#xff1a;2005-2022年 2、来源&#xff1a;国家统计局、统计年鉴 3、指标&#xff1a;全体居民人均可支配收入 4、范围&#xff1a;31省 5、缺失情况&#xff1a;无缺失 6、指标解释…

redis基本数据结构与应用

文章目录 概要String结构Hash结构List结构Set结构Zset结构bitmap位图类型geo地理位置类型其他常用命令 概要 redis常用的5种不同数据结构类型之间的映射如下&#xff1a; 结构类型结构存储的值结构的读写能力STRING可以是字符串、整数或者浮点数key-value形式&#xff1b;对整…

利用cherry pick巧妙地将某次提交单独合并到其他分支

0. 引言 最近在进行系统的多版本并行开发&#xff0c;涉及一些共有基础功能提交时就遇到了麻烦&#xff0c;一份代码需要向多个版本分支进行同步&#xff0c;以保证多版本都能有更新该基础功能。 多次对比提交的方式显然会带来巨大的工作量。但实际上我们可以通过git的cherry…

鹏哥C语言复习——调试

目录 什么是调试&#xff1f; Debug和Release&#xff1a; 调试方法&#xff1a; 环境准备&#xff1a; 调试快捷键介绍&#xff1a; 调试快捷键注意事项&#xff1a; 监视与内存查看&#xff1a; 数组元素的监视&#xff1a; 编译常见错误归类&#xff1a; 编译型错…

迁移基于MicroBlaze处理器的设计

迁移基于MicroBlaze处理器的设计 生成系统基础设施&#xff08;MicroBlaze、AXI_Interconnect&#xff0c; Clk_Wiz、Proc_Sys_Reset&#xff09; 生成系统基础设施&#xff08;MicroBlaze、AXI_Interconnect、Clk_Wiz和 Proc_Sys_Reset&#xff09;&#xff1a; 1.使用所需的板…