Shulou(Shulou.com)06/01 Report--

This article introduces the relevant knowledge of "how to use svg to draw a path map in vue". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

What is svg:

SVG is a language that uses XML to describe two-dimensional graphics and drawing programs.

Advantages and characteristics of svg

The graphic quality of SVG image will not be lost when it is enlarged or changed in size.

SVG is the standard of the World wide Web Consortium

SVG is integrated with W3C standards such as DOM and XSL

SVG can be read and modified by many tools (such as notepad)

SVG is smaller and more compressible than JPEG and GIF images.

SVG is scalable

SVG images can be printed with high quality at any resolution

SVG can be magnified without deterioration in image quality.

The text in the SVG image is optional and searchable (ideal for making maps)

SVG can be run with Java technology

SVG is an open standard

SVG files are pure XML

Effect picture:

Html {{item.dw}} {{item.train}} number of deployable terminals: {{item.zdNum}} number of people: {{item.person}} data variable / * * all marked point coordinates in svg * / pointers: [{x: 700 Y: 180}, {x: 520, y: 320}, {x: 860,260}, {x: 750,380},], / * all paths array in svg * / paths: [{path_d: "M720200 Q810250890270"} / / clockwise path 1 {path_d: "M880280 Q750350750380"}, / / clockwise path 2 {path_d: "M750380 Q620380550350"}, / / clockwise path 3 {path_d: "M550340 Q710250730200"}, / / clockwise path 4] / * * all suspension box coordinates * / infos: [{x: 730,130, show: true}, {x: 500,370, show: true}, {x: 890,260, show: true}, {x: 780,380, show: true},] / * * details of all floating boxes are displayed * / infoDw: []

[note]

In data, I defined the path path variable of svg, such as path_d: "M720200 Q810250890270", which means: the two coordinates after M are the xyvalue of the starting point (point A below), Q represents the control point of the path (that is, the curvature deviation of the path, point B below), and the last two coordinates are the xyvalue of the key point (point C below).

An and C are the starting point and end point, respectively, and B is the control point.

The definition of coordinates in data is shown in the following figure:

Because the information coordinates of the suspension frame have rules to follow, I have written a method to obtain the coordinates in a loop, which can save code space.

Get the coordinates of the text tag of the suspension box in methods, and call it in mounted:

GetDetailxy () {/ / the coordinates of the contents of the suspension box are basically the same as those of the suspension box / / assign this.infos.map ((item) to the detailed coordinates of the suspension box by looping the array of the suspension box I) = > {let x = item.x + 40 let y = item.y this.infoDw.push ({dw: 'unit 1x, train:' training ground 1x, zdNum: 100, person: 200, show:true, x1: X Y1: y + 20, x2: X, y2: y + 40, x3: X, y3: y + 60, x4: X, y4: y + 80,})})}

Note: html tags, such as div,img, cannot be used in svg, so image tags are generally used in svg to place pictures, and text images to place text content.

This is the end of the content of "how to use svg to draw a path map in vue". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.