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的合并表格中相同文本的相邻单元格的代码
Apr 06 Javascript
jquery 取子节点及当前节点属性值的方法
Aug 24 Javascript
用javascript实现自动输出网页文本
Jul 30 Javascript
javascript中对变量类型的判断方法
Aug 09 Javascript
谈谈JavaScript异步函数发展历程
Sep 29 Javascript
浅析在javascript中创建对象的各种模式
May 06 Javascript
Bootstrap 折叠(Collapse)插件用法实例详解
Jun 01 Javascript
纯JS实现弹性导航条效果
Mar 06 Javascript
JS抛物线动画实例制作
Feb 24 Javascript
Cordova(ionic)项目实现双击返回键退出应用
Sep 17 Javascript
vue框架中props的typescript用法详解
Feb 17 Javascript
如何用JavaScript学习算法复杂度
Apr 30 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
pw的一个放后门的方法分析
2007/10/08 PHP
php通过array_push()函数添加多个变量到数组末尾的方法
2015/03/18 PHP
PHP读取汉字的点阵数据
2015/06/22 PHP
PHP输出多个元素的排列或组合的方法
2017/03/14 PHP
用JavaScript调用WebService的示例
2008/04/07 Javascript
JSQL 批量图片切换的实现代码
2010/05/05 Javascript
EXTJS FORM HIDDEN TEXTFIELD 赋值 使用value不好用的问题
2011/04/16 Javascript
JS操作图片(增,删,改) 例子
2013/04/17 Javascript
jQuery插件slides实现无缝轮播图特效
2015/04/17 Javascript
javascript中数组方法汇总
2015/07/07 Javascript
理解javascript函数式编程中的闭包(closure)
2016/03/08 Javascript
jquery遍历json对象集合详解
2016/05/18 Javascript
利用PM2部署node.js项目的方法教程
2017/05/10 Javascript
Angular6笔记之封装http的示例代码
2018/07/27 Javascript
js中的深浅拷贝问题简析
2019/05/10 Javascript
深入浅析Vue中mixin和extend的区别和使用场景
2019/08/01 Javascript
vue3 源码解读之 time slicing的使用方法
2019/10/31 Javascript
Python Deque 模块使用详解
2014/07/04 Python
python网络编程之文件下载实例分析
2015/05/20 Python
Python利用正则表达式实现计算器算法思路解析
2018/04/25 Python
解决pycharm 远程调试 上传 helpers 卡住的问题
2019/06/27 Python
flask框架jinja2模板与模板继承实例分析
2019/08/01 Python
python字符串替换re.sub()方法解析
2019/09/18 Python
详解Python中的format格式化函数的使用方法
2019/11/20 Python
Python内存映射文件读写方式
2020/04/24 Python
Python读取二进制文件代码方法解析
2020/06/22 Python
Python JSON常用编解码方法代码实例
2020/09/05 Python
监理员的岗位职责
2013/11/13 职场文书
护士毕业自我鉴定
2014/02/07 职场文书
《蜗牛》教学反思
2014/02/18 职场文书
委托书样本
2014/04/02 职场文书
新学期开学演讲稿
2014/05/24 职场文书
优秀班主任申报材料
2014/12/16 职场文书
获奖感言怎么写
2015/07/31 职场文书
谢师宴家长答谢词
2015/09/30 职场文书
uniapp 微信小程序 自定义tabBar 导航
2022/04/22 Javascript