解析svg图，并挂载到前端页面上（uniapp）

• 最近有个功能，后台返回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"