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 相关文章推荐
用显卡加速,轻松把笔记本打造成取暖器的办法!
Apr 17 Javascript
javascript实现在指定元素中垂直水平居中
Sep 13 Javascript
Express实现前端后端通信上传图片之存储数据库(mysql)傻瓜式教程(一)
Dec 10 Javascript
理解Javascript文件动态加载
Jan 29 Javascript
Javascript实现鼠标框选操作  不是点击选取
Apr 14 Javascript
jQuery实现侧浮窗与中浮窗切换效果的方法
Sep 05 Javascript
angular框架实现全选与单选chekbox的自定义
Jul 06 Javascript
vue单页应用在页面刷新时保留状态数据的方法
Sep 21 Javascript
了解javascript中变量及函数的提升
May 27 Javascript
js如何获取访问IP、地区、当前操作浏览器
Jul 23 Javascript
vue中使用rem布局代码详解
Oct 30 Javascript
vue中是怎样监听数组变化的
Oct 24 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
极典R601SW收音机
2021/03/02 无线电
php socket客户端及服务器端应用实例
2014/07/04 PHP
laravel框架关于搜索功能的实现
2018/03/15 PHP
js 键盘记录实现(兼容FireFox和IE)
2010/02/07 Javascript
JQueryEasyUI datagrid框架的基本使用
2013/04/08 Javascript
javascript:void(0)使用探讨
2013/08/27 Javascript
可选择和输入的下拉列表框示例
2013/11/05 Javascript
jquery阻止后续事件只执行第一个事件
2014/07/24 Javascript
深入理解JavaScript系列(29):设计模式之装饰者模式详解
2015/03/03 Javascript
js正则表达式中exec用法实例
2015/07/23 Javascript
js判断日期时间有效性的方法
2015/10/24 Javascript
简单实现轮播图效果的实例
2016/07/15 Javascript
js排序与重组的实例讲解
2017/08/28 Javascript
javascript设计模式 ? 中介者模式原理与用法实例分析
2020/04/20 Javascript
vue切换菜单取消未完成接口请求的案例
2020/11/13 Javascript
Python基于sftp及rsa密匙实现远程拷贝文件的方法
2016/09/21 Python
Python 自动化表单提交实例代码
2017/06/08 Python
Python3中的json模块使用详解
2018/05/05 Python
python执行系统命令后获取返回值的几种方式集合
2018/05/12 Python
python爬取盘搜的有效链接实现代码
2019/07/20 Python
python传到前端的数据,双引号被转义的问题
2020/04/03 Python
Python3安装模块报错Microsoft Visual C++ 14.0 is required的解决方法
2020/07/28 Python
matplotlib教程——强大的python作图工具库
2020/10/15 Python
Django执行源生mysql语句实现过程解析
2020/11/12 Python
HTML5拖拽文件到浏览器并实现文件上传下载功能代码
2013/06/06 HTML / CSS
HTML5中input[type='date']自定义样式与日历校验功能的实现代码
2017/07/11 HTML / CSS
俄罗斯品牌服装和鞋子在线商店:BRIONITY
2020/03/26 全球购物
体育教育毕业生自荐信
2013/11/21 职场文书
大学运动会入场词
2014/02/22 职场文书
勾股定理课后反思
2014/04/26 职场文书
党员自我评议个人对照检查材料
2014/09/16 职场文书
房屋出售授权委托书
2014/10/12 职场文书
优秀共产党员事迹材料
2014/12/18 职场文书
政协工作总结2015
2015/05/20 职场文书
行政处罚听证告知书
2015/07/01 职场文书
2016年第二十届“母亲节暨幸福工程救助贫困母亲活动日”活动总结
2016/04/06 职场文书