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 相关文章推荐
在网页中控制wmplayer播放器
Jul 01 Javascript
JavaScript格式化数字的函数代码
Nov 30 Javascript
推荐11款jQuery开发的复选框和单选框美化插件
Aug 02 Javascript
原生JS可拖动弹窗效果实例代码
Nov 09 Javascript
javascript获取隐藏元素(display:none)的高度和宽度的方法
Jun 06 Javascript
JS实现清除指定cookies的方法
Sep 20 Javascript
jQuery遍历json中多个map的方法
Feb 12 Javascript
javascript中this用法实例详解
Apr 06 Javascript
Angularjs添加排序查询功能的实例代码
Oct 24 Javascript
JavaScript引用类型Function实例详解
Aug 09 Javascript
vue+axios实现文件下载及vue中使用axios的实例
Sep 21 Javascript
jQuery中DOM操作原则实例分析
Aug 01 jQuery
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
收音机玩机评测 406 篇视频合集
2020/03/11 无线电
linux下 C语言对 php 扩展
2008/12/14 PHP
了解PHP的返回引用和局部静态变量
2015/06/04 PHP
ThinkPHP自定义Redis处理SESSION的实现方法
2016/05/16 PHP
jquery应该如何来设置改变按钮input的onclick事件
2012/12/10 Javascript
JS getAttribute和setAttribute(取得和设置属性)的使用介绍
2013/07/10 Javascript
Jquery 数组操作大全个人总结
2013/11/13 Javascript
jQuery简单实现banner图片切换
2014/01/02 Javascript
JS实现鼠标滑过链接改变网页背景颜色的方法
2015/10/20 Javascript
jQuery+formdata实现上传进度特效遇到的问题
2016/02/24 Javascript
点击页面任何位置隐藏div的实现方法
2016/09/05 Javascript
基于jQuery代码实现圆形菜单展开收缩效果
2017/02/13 Javascript
JS+Ajax实现百度智能搜索框
2017/08/04 Javascript
详解jquery插件jquery.viewport.js学习使用方法
2017/09/08 jQuery
jQuery实现的简单前端搜索功能示例
2017/10/28 jQuery
使用Vue-cli 3.0搭建Vue项目的方法
2018/06/07 Javascript
微信小程序自定义tab实现多层tab嵌套功能
2018/06/15 Javascript
JS实现的RC4加密算法示例
2018/08/16 Javascript
Nodejs中的require函数的具体使用方法
2019/04/02 NodeJs
微信小程序自定义可滑动顶部TabBar选项卡实现页面切换功能示例
2019/05/14 Javascript
微信小程序 行的删除和增加操作实现详解
2019/09/29 Javascript
通过实例解析jQ Ajax操作相关原理
2020/09/23 Javascript
Python是编译运行的验证方法
2015/01/30 Python
Python 创建子进程模块subprocess详解
2015/04/08 Python
深入学习python的yield和generator
2016/03/10 Python
利用Pycharm断点调试Python程序的方法
2018/11/29 Python
Django model反向关联名称的方法
2018/12/15 Python
pytorch的梯度计算以及backward方法详解
2020/01/10 Python
CSS3中动画属性transform、transition和animation属性的区别
2016/09/25 HTML / CSS
HTML5 Canvas实现玫瑰曲线和心形图案的代码实例
2014/04/10 HTML / CSS
Sunglasses Shop荷兰站:英国最大的太阳镜独立在线零售商和供应商
2017/01/08 全球购物
理肤泉加拿大官网:La Roche-Posay加拿大
2018/07/06 全球购物
Feelunique澳大利亚:欧洲的化妆品零售电商
2019/12/18 全球购物
英国著名的美容护肤和护发产品购物网站:Lookfantastic
2020/11/23 全球购物
2014年食品安全工作总结
2014/12/04 职场文书
2019年冬至:天冷暖人心的问候祝福语大全
2019/12/20 职场文书