vue中使用svg畫路徑圖的詳細(xì)介紹

更新時間：2022年04月01日 11:33:53 作者：suoh's?Blog

這篇文章主要介紹了vue中使用svg畫路徑圖的相關(guān)知識，在這大家需要注意svg中不能使用html標(biāo)簽，例如div，img等，因此在svg中一般使用image標(biāo)簽放置圖片，text圖片放置文本內(nèi)容,詳細(xì)代碼跟隨小編一起看看吧

什么是svg:

SVG 是使用 XML 來描述二維圖形和繪圖程序的語言。

svg的優(yōu)點與特點

SVG 圖像在放大或改變尺寸的情況下其圖形質(zhì)量不會有所損失
SVG 是萬維網(wǎng)聯(lián)盟的標(biāo)準(zhǔn)
SVG 與諸如 DOM 和XSL 之類的 W3C 標(biāo)準(zhǔn)是一個整體
SVG 可被非常多的工具讀取和修改（比如記事本）
SVG 與 JPEG 和 GIF 圖像比起來，尺寸更小，且可壓縮性更強。
SVG 是可伸縮的
SVG 圖像可在任何的分辨率下被高質(zhì)量地打印
SVG 可在圖像質(zhì)量不下降的情況下被放大
SVG 圖像中的文本是可選的，同時也是可搜索的（很適合制作地圖）
SVG 可以與 Java 技術(shù)一起運行
SVG 是開放的標(biāo)準(zhǔn)
SVG 文件是純粹的 XML

效果圖：

html

  <svg class="svgClass" xmlns="http://www.w3.org/2000/svg" version="1.1" width="1100px" height="700px">
          <!-- 標(biāo)記點之間的路徑 -->
          <path v-for="(item,i) in paths" :d="item.path_d" fill="none" stroke-width="2" stroke-dasharray="15 8" stroke="blue" style="fill:none;stroke:#E3BA2D;stroke-width:2;stroke-linejoin:round"></path>
          <!-- 標(biāo)記點圖片展示 -->
          <image v-for="(item,i) in pointers" style="cursor:pointer" xlink:href="../../assets/img/jichu/point.png" type="image/jpeg" :x="item.x" :y="item.y" width="34" height="40" />
          <!-- 標(biāo)記點詳情背景展示 -->
          <image v-for="(item,i) in infos" style="cursor:pointer;" xlink:href="../../assets/img/jichu/borderbg.png" type="image/jpeg" :x="item.x" :y="item.y" width="200" height="100" />
          <!-- 詳情內(nèi)容展示 -->
          <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 v-for="(item,i) in infoDw" :key="i" class="textsvg" :x="item.x3" :y="item.y3">可部署終端數(shù)：{{item.zdNum}}</text>
          <text v-for="(item,i) in infoDw" :key="i" class="textsvg" :x="item.x4" :y="item.y4">容納人數(shù)：{{item.person}}</text>
     </svg>

data中定義的變量

 /** svg中所有標(biāo)記點坐標(biāo) */
            pointers: [
                { x: 700, y: 180 },
                { x: 520, y: 320 },
                { x: 860, y: 260 },
                { x: 750, y: 380 },
            ],
            /** svg中所有路徑數(shù)組 */
            paths: [
                { path_d: "M720,200 Q810,250,890,270" },//順時針路徑1
                { path_d: "M880,280 Q750,350,750,380" },//順時針路徑2
                { path_d: "M750,380 Q620,380,550,350" },//順時針路徑3
                { path_d: "M550,340 Q710,250,730,200" },//順時針路徑4
            ],
            /** 所有懸浮框坐標(biāo) */
            infos: [
                { x: 730, y: 130, show: true },
                { x: 500, y: 370, show: true },
                { x: 890, y: 260, show: true },
                { x: 780, y: 380, show: true },
            ],
            /** 所有懸浮框詳情內(nèi)容展示 */
            infoDw: [],

【注意】【注意】【注意】

在data中我定義了svg的path路徑變量例如： path_d: "M720,200 Q810,250,890,270" ，它代表的含義是：M后面的兩個坐標(biāo)是起點的xy值（下圖A點），Q代表的是路徑的控制點（也就是路徑的曲度偏向，下圖B點），最后兩個坐標(biāo)是重點的xy值（下圖C點）

A 和 C 分別是起點和終點，B 是控制點

data中的坐標(biāo)定義見下圖：

由于懸浮框的信息坐標(biāo)有規(guī)律可循，因此我寫了一個方法去循環(huán)獲取坐標(biāo)，可以節(jié)省代碼空間

methods中獲取懸浮框text標(biāo)簽的坐標(biāo)，在mounted中調(diào)用即可：

 getDetailxy() {
            //懸浮框內(nèi)容的坐標(biāo)跟懸浮框的坐標(biāo)基本一致
            //通過循環(huán)懸浮框的數(shù)組來給框內(nèi)的詳情坐標(biāo)進行賦值
            this.infos.map((item, i) => {
                let x = item.x + 40
                let y = item.y
                this.infoDw.push(
                    {
                        dw: '單位1', train: '訓(xùn)練場地1', 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,
                    }
                )
            })
        },