- 最近有个功能,后台返回svg的配电图,解析之后,变成xml挂载到页面上.然后实现缩放,类似这种功能.
- 缩放用的是panzoom这个组件 下载地址 panzoom下载地址.
- 本来app用的是uniapp写的,但是uniapp不支持svg图,所以我选择了外部挂载进来的方法。
- 用了uniapp自带的一个web-view,单独创建了一个vue的项目,外部链接,展示svg图.
- 链接: uniapp-webview参考地址。
- 或者你自己会操作的话,转成canvas展示也行,不过会折损清晰度。
第一步创建两个项目,实现页面挂载进来,然后我们就能在app里查看svg图了 然后通过web-view引入,这个链接就是你引入的项目地址,存放svg的
- 配置好axios 和 vue项目之后(前面这两块我写过笔记,不懂可以看前面两张)
- 下面写如何挂载svg解析到页面上
- 我这里的是根据下拉框,选择id,根据id再拼接svg,获取后台返回的类似这种xml文件,后台返回的像下面这样
下面贴页面代码,不带样式,样式自己搞,展示会有些优先级的问题,这个都能自己解决。
<template>
<div>
//根据select的option值选择的对应的ID 获取值,路径,名称,option的数据值通过后台接口返回渲染上去
<select v-model="currentValue" filterable placeholder="请选择" @change="change($event)">
<template v-for="(item,index) in optionList">
<option v-if="item.value" :key="index" :label="item.label" :value="item.value"></option>
</template>
</select>
<div id="app" v-html="str" ref="app"