vue项目里面引用svg文件并给svg里面的元素赋值


Posted in Javascript onAugust 17, 2020

前言

项目里面用的svg图片比较复杂,还要对里面的元素赋值等等的。在HTML里面有试着用过svg,在vue里面还是第一次尝试。百度了很多要配置webpack.base.conf.js,还要封装组件什么的,但是没有用,那些方法应该是对icon的svg或者简单的svg图片有用吧。后面改变思路,想着能不能组件的形式引入svg文件。静态界面下看看能不能实现,然后在做动态赋值。折腾了一天,还是弄出来了。真不容易,看来svg这一块还是要好好学学的。话不多说,直接放代码吧!

第一步:

1、先看看我们要用的svg的文件代码,原先我是整个文件这样子引入到vue里面,但是图片不显示出来。后面一步一步的检查测试后才发现不能写有下面的这个声明。

<?xml version="1.0" encoding="utf-8"?>
这个是xml文件声明的,vue里面不能这样用,至于解释和原因,我也不懂,还是要进一步学习研究才知道了。
<?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">

vue项目里面引用svg文件并给svg里面的元素赋值

第二步:

东扯西扯的一堆,接下来我们看看vue里面的直接用法吧。 因为要用的svg文件有好几个,但是赋值什么的方法应该是一样的,所以我就把js文件单独抽出来了。顺便补补svg一些元素属性的含义。

vue项目里面引用svg文件并给svg里面的元素赋值

插播:更为简单粗暴的方式就是直接用img引进去(但是这种的话,没有办法给svg里面的元素赋值,只能是把svg图片放出来展示。可能也行,只是还我不知道怎么弄)

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

坐标系和 viewBox

<svg> 元素的 viewBox 属性非常重要,因为它定义了 SVG 的用户坐标系。简而言之,viewBox定义了用户空间的位置和维度以便于绘制 
SVG。(可以指定 SVG 图像的可见区域(viewPort))
viewBox 由四个数字组成,顺序需要保持一致 —— min-x,min-y,width,height

第三步:

就是往svg里面赋值了,在单独抽出来的js文件里面完成这些工作。简单的就是jQuery的方法了,获取元素id,然后赋值。

var el = document.getElementById('A1');
 el.innerHTML = '1024K'; //赋值
 el.attributes.fill.value = '#FF0000'; //改变svg里面的id为A1的元素的填充颜色(背景颜色)

注意:这个id赋值,你要确保你前台的svg文件里面的text的id跟你后台是一样的。(我们项目的svg文件是标好了id的,然后后台想要设置这个值的话,要根据svg里面的id来设置。)

vue项目里面引用svg文件并给svg里面的元素赋值

补充:后台返回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); //对escape() 编码的字符串进行解码。
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元素,是的话,就进行赋值
 
 } 
 }
</script>

vue项目里面引用svg文件并给svg里面的元素赋值

*** 这里要注意的是,你界面上的元素格式要如下图

<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>,那么那个判断child.tagName == 'text' && child.id != null,不执行!
 <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>
 ```

总结

到此这篇关于vue项目里面引用svg文件并给svg里面的元素赋值的文章就介绍到这了,更多相关vue引用svg文件并赋值内容请搜索三水点靠木以前的文章或继续浏览下面的相关文章希望大家以后多多支持三水点靠木!

Javascript 相关文章推荐
jQuery timers计时器简单应用说明
Oct 28 Javascript
xss文件页面内容读取(解决)
Nov 28 Javascript
利用JS延迟加载百度分享代码,提高网页速度
Jul 01 Javascript
JavaScript中判断页面关闭、页面刷新的实现代码
Aug 27 Javascript
node.js中的path.isAbsolute方法使用说明
Dec 08 Javascript
Javascript实现字数统计
Jul 03 Javascript
jQuery实现火车票买票城市选择切换功能
Sep 15 jQuery
20道JS原理题助你面试一臂之力(必看)
Jul 22 Javascript
Vue.js下拉菜单组件使用方法详解
Oct 19 Javascript
javascript实现评分功能
Jun 24 Javascript
vue中v-for循环选中点击的元素并对该元素添加样式操作
Jul 17 Javascript
Angular+Ionic使用queryParams实现跳转页传值的方法
Sep 05 Javascript
vue动态加载SVG文件并修改节点数据的操作代码
Aug 17 #Javascript
Vue如何将页面导出成PDF文件
Aug 17 #Javascript
Vue实现腾讯云点播视频上传功能的实现代码
Aug 17 #Javascript
javascript实现贪吃蛇游戏(娱乐版)
Aug 17 #Javascript
three.js着色器材质的内置变量示例详解
Aug 16 #Javascript
Angular进行简单单元测试的实现方法实例
Aug 16 #Javascript
前端使用crypto.js进行加密的函数代码
Aug 16 #Javascript
You might like
php 正则 过滤html 的超链接
2009/06/02 PHP
Yii实现显示静态页的方法
2016/04/25 PHP
php array_values 返回数组的值实例详解
2016/11/17 PHP
laravel5.2实现区分前后台用户登录的方法
2017/01/11 PHP
一个不错的应用,用于提交获取文章内容,不推荐用
2007/03/03 Javascript
让iframe子窗体取父窗体地址栏参数(querystring)
2009/10/13 Javascript
javascript改变position值实现菜单滚动至顶部后固定
2013/01/18 Javascript
JavaScript动态修改网页元素内容的方法
2015/03/21 Javascript
JavaScript实现的简单幂函数实例
2015/04/17 Javascript
谈谈javascript中使用连等赋值操作带来的问题
2015/11/26 Javascript
JavaScript文档碎片操作实例分析
2015/12/12 Javascript
AngularJs 终极购物车(实例讲解)
2017/11/08 Javascript
bootstrap paginator分页插件的两种使用方式实例详解
2017/11/14 Javascript
关于Webpack dev server热加载失败的解决方法
2018/02/22 Javascript
Vue vm.$attrs使用场景详解
2020/03/08 Javascript
vue打开子组件弹窗都刷新功能的实现
2020/09/21 Javascript
vue实现拖拽进度条
2021/03/01 Vue.js
[31:01]2014 DOTA2国际邀请赛中国区预选赛5.21 CNB VS Orenda
2014/05/23 DOTA
[01:08:32]DOTA2-DPC中国联赛 正赛 DLG vs PHOENIX BO3 第二场 1月18日
2021/03/11 DOTA
跟老齐学Python之折腾一下目录
2014/10/24 Python
用Python中的字典来处理索引统计的方法
2015/05/05 Python
初学python的操作难点总结(新手必看篇)
2017/08/03 Python
python3读取csv和xlsx文件的实例
2018/06/22 Python
selenium跳过webdriver检测并模拟登录淘宝
2019/06/12 Python
Python math库 ln(x)运算的实现及原理
2019/07/17 Python
django的分页器Paginator 从django中导入类
2019/07/25 Python
Django Rest framework认证组件详细用法
2019/07/25 Python
解决python3 requests headers参数不能有中文的问题
2019/08/21 Python
经典的班主任推荐信
2013/10/28 职场文书
大学总结自我鉴定
2014/01/18 职场文书
初三物理教学反思
2014/01/21 职场文书
党的群众路线教育实践活动学习笔记
2014/11/05 职场文书
2015年档案管理员工作总结
2015/05/13 职场文书
第一节英语课开场白
2015/06/01 职场文书
2015年卫生院健康教育工作总结
2015/07/24 职场文书
队名及霸气口号大全
2015/12/25 职场文书