快捷導(dǎo)航

vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值

更新時(shí)間：2020年08月17日 09:56:43 作者：Miss.lang

這篇文章主要介紹了vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值,本文分步驟通過(guò)實(shí)例代碼給大家介紹的非常詳細(xì)，對(duì)大家的學(xué)習(xí)或工作具有一定的參考借鑒價(jià)值，需要的朋友可以參考下

前言

項(xiàng)目里面用的svg圖片比較復(fù)雜，還要對(duì)里面的元素賦值等等的。在HTML里面有試著用過(guò)svg，在vue里面還是第一次嘗試。百度了很多要配置webpack.base.conf.js,還要封裝組件什么的，但是沒(méi)有用，那些方法應(yīng)該是對(duì)icon的svg或者簡(jiǎn)單的svg圖片有用吧。后面改變思路，想著能不能組件的形式引入svg文件。靜態(tài)界面下看看能不能實(shí)現(xiàn)，然后在做動(dòng)態(tài)賦值。折騰了一天，還是弄出來(lái)了。真不容易，看來(lái)svg這一塊還是要好好學(xué)學(xué)的。話不多說(shuō)，直接放代碼吧！

第一步：

1、先看看我們要用的svg的文件代碼，原先我是整個(gè)文件這樣子引入到vue里面，但是圖片不顯示出來(lái)。后面一步一步的檢查測(cè)試后才發(fā)現(xiàn)不能寫(xiě)有下面的這個(gè)聲明。

<?xml version="1.0" encoding="utf-8"?>
這個(gè)是xml文件聲明的，vue里面不能這樣用，至于解釋和原因，我也不懂，還是要進(jìn)一步學(xué)習(xí)研究才知道了。

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

第二步：

東扯西扯的一堆，接下來(lái)我們看看vue里面的直接用法吧。因?yàn)橐玫膕vg文件有好幾個(gè)，但是賦值什么的方法應(yīng)該是一樣的，所以我就把js文件單獨(dú)抽出來(lái)了。順便補(bǔ)補(bǔ)svg一些元素屬性的含義。

插播：更為簡(jiǎn)單粗暴的方式就是直接用img引進(jìn)去(但是這種的話，沒(méi)有辦法給svg里面的元素賦值，只能是把svg圖片放出來(lái)展示。可能也行，只是還我不知道怎么弄)

<img src="./line.svg" alt="">

坐標(biāo)系和 viewBox

<svg> 元素的 viewBox 屬性非常重要，因?yàn)樗x了 SVG 的用戶坐標(biāo)系。簡(jiǎn)而言之，viewBox定義了用戶空間的位置和維度以便于繪制 
SVG。（可以指定 SVG 圖像的可見(jiàn)區(qū)域（viewPort））
viewBox 由四個(gè)數(shù)字組成，順序需要保持一致 —— min-x,min-y,width,height

第三步：

就是往svg里面賦值了，在單獨(dú)抽出來(lái)的js文件里面完成這些工作。簡(jiǎn)單的就是jQuery的方法了，獲取元素id，然后賦值。

var el = document.getElementById('A1');
 el.innerHTML = '1024K'; //賦值
 el.attributes.fill.value = '#FF0000'; //改變svg里面的id為A1的元素的填充顏色（背景顏色）

注意：這個(gè)id賦值，你要確保你前臺(tái)的svg文件里面的text的id跟你后臺(tái)是一樣的。（我們項(xiàng)目的svg文件是標(biāo)好了id的，然后后臺(tái)想要設(shè)置這個(gè)值的話，要根據(jù)svg里面的id來(lái)設(shè)置。）

補(bǔ)充：后臺(tái)返回svg里面的代碼的話

<template>
 <div id="bodydv" class="bodydv">
 <div style="width:100%;padding:0px;margin:0px; height: 880px; ">
  <svg id="svgInfo" height="880" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="2" stroke="#000000" style="width:100%">
  </svg>
 </div>
 </div>
</template>
 
<script>
 var strJson = unescape(this.scene.SceneTemp); //對(duì)escape() 編碼的字符串進(jìn)行解碼。
var svg = document.getElementById('svgInfo'); //svg的id
svg.innerHTML = strJson; // svg里面的元素
var child;
 for (var i = 0; i < svg.childNodes.length; i++) {	//循壞svg里面的元素
 child = svg.childNodes[i];
 if (child.tagName == 'text' && child.id != null && child.id.length > 0) { // 判斷是不是text元素，是的話，就進(jìn)行賦值
 
 } 
 }
</script>

*** 這里要注意的是，你界面上的元素格式要如下圖

<svg id="svgInfo" height="880" version="1.1" xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink" stroke-width="2" stroke="#000000" style="width:100%">
  <text transform="matrix(1 0 0 1 1110.543 530.8516)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 556.5186)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 582.1846)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
  <text transform="matrix(1 0 0 1 1111.0996 607.8516)" fill="#F7F7F7" font-family="'MicrosoftYaHei'"
     font-size="14">1.00</text>
 </svg>
 //如果svg里面，用 <g>，那么那個(gè)判斷child.tagName == 'text' && child.id != null，不執(zhí)行！
 <g>
  <line ></line>
  <rect x="121.228" y="65.5" fill="#0A750C" width="57.59" height="28" />
  <text id="A1" fill="#F7F7F7" font-family="'MicrosoftYaHei'" font-size="14">11.00</text>
 </g>
 ```

總結(jié)

到此這篇關(guān)于vue項(xiàng)目里面引用svg文件并給svg里面的元素賦值的文章就介紹到這了,更多相關(guān)vue引用svg文件并賦值內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: