使用vue加svg实现流程图代码,vue引用svg矢量图
本文主要介绍在vue中使用svg绘制道路地图的知识。大家要注意，html标签，比如div，img，在svg中是不能使用的。所以在svg中，一般用图像标签来放置图片，用文本图像来放置文本内容。让我们来看看边肖的详细代码。
什么是svg:
SVG是一种使用XML描述2D图形和绘图程序的语言。
svg的优点与特点
当图像被放大或改变大小时，SVG的图形质量不会损失。SVG是万维网联盟的标准。SVG与DOM、XSL等W3C标准是一个整体。SVG可以被许多工具读取和修改(比如记事本)。与JPEG和GIF图像相比，SVG的尺寸更小，可压缩性更强。SVG是一种可缩放的SVG图像，可以以任何分辨率高质量打印。SVG可以在不降低图像质量的情况下放大。SVG图像中的文本是可选的和可搜索的(非常适合制作地图)。SVG可以用Java技术运行。SVG是一个开放的标准SVG文件。它是纯XML
效果图：
。
html
SVG class= SVG class xmlns= http://www . w3 . org/2000/SVG version= 1.1 width= 1100 px height= 700 px
！-标记点之间的路径-
path v-for=(item，I)in paths :d= item . path _ d fill= none stroke-width= 2 stroke-dash array= 15 8 stroke= blue style= fill:none；笔画：# E3BA2D笔画宽度：2；描边-线条连接：圆形/路径
！-标记点图片显示-
指针 style= cursor:pointer xlink:href=中的图像v-for=(item，I)././assets/img/jichu/point . png type= image/JPEG :x= item . x :y= item . y width= 34 height= 40 /
！-标记点的细节、背景显示-
infos style= cursor:pointer；中的image v-for=(item，I)xlink:href=././assets/img/jichu/border BG . png type= image/JPEG :x= item . x :y= item . y width= 200 height= 100 /
！-详细内容显示-
text v-for=(item，I)in infoDw :key= I class= textsvg :x= item . x1 :y= item . y1 { { item . dw } }/text
text v-for=(item，I)in infoDw :key= I class= textsvg :x= item . x2 :y= item . y2 { { item . train } }/text
Text-for= (item，I)in info dw :key= I class= text SVG :x= item . x3 :y= item . y3 可部署终端的数量：{{item.zdNum}}/text
Text-for= (item，I)in info dw :key= I class= text SVG :x= item . x4 :y= item . y4 容量：{{item.person}}/text
/svg
data中定义的变量
/* * SVG中所有标记点的坐标*/
指针：[
{ x: 700，y: 180 }，
{ x: 520，y: 320 }，
{ x: 860，y: 260 }，
{ x: 750，y: 380 }，
],
/* * SVG中所有路径的数组*/
路径：[
{path _ d: M720，200Q810，250，890，270}，//顺时针路径1
{path _ d: M880，280Q750，350，750，380}，//顺时针路径2
{path _ d: M750，380Q620，380，550，350}，//顺时针路径3
{path _ d: M550，340Q710，250，730，200}，//顺时针路径4
],
/* *所有浮动框的坐标*/
信息：[
{ x: 730，y: 130，show: true }，
{ x: 500，y: 370，show: true }，
{ x: 890，y: 260，show: true }，
{ x: 780，y: 380，show: true }，
],
/* *显示所有浮动框架的详细信息*/
infoDw: []，
[注意][注意][注意]
在数据中我定义了svg的路径变量比如：path _ d: M720，200Q810，250，890，270 ，意思是M后面的两个坐标是起点(下面A点)的xy值，Q代表路径的控制点(也就是路径的曲率偏差，下面B点)，最后两个坐标是关键点。
a和C分别是起点和终点，B是控制点。
数据中坐标的定义见下图：
因为浮动框的信息坐标是有规律可循的，所以我写了一个循环获取坐标的方法，可以节省代码空间。
在方法中获取浮动框文本标签的坐标，并在mounted:
getDetailxy() {
//浮动框内容的坐标和浮动框基本一致。
//通过循环浮动框数组来分配框中的详细坐标。
this.infos.map((item，i)={
设x=item.x 40
设y=item.y
this.infoDw.push(
{
Dw:“单位1”，培训：“培训地点1”，zdNum: 100，人员：200，
秀：真的，
x1: x，y1: y 20，
x2: x，y2: y 40，
x3: x，y3: y 60，
x4: x，y4: y 80，
}
)
})
},
注意：html标签，如div，img等。不能在svg中使用。所以在svg中，一般用图像标签来放置图片，用文本图像来放置文本内容。
关于在vue中用svg绘制路线图的这篇文章到此为止。关于使用vuesvg绘制路线图的更多信息，请搜索我们以前的文章或继续浏览下面的相关文章。希望大家以后能多多支持我们！
郑重声明：本文由网友发布，不代表盛行IT的观点，版权归原作者所有，仅为传播更多信息之目的，如有侵权请联系，我们将第一时间修改或删除，多谢。