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 相关文章推荐
Javascript的IE和Firefox兼容性汇编(zz)
Feb 02 Javascript
CSS和Javascript简单复习资料
Jun 29 Javascript
45个JavaScript编程注意事项、技巧大全
Feb 11 Javascript
Javascript中匿名函数的调用与写法实例详解(多种)
Jan 26 Javascript
JavaScript设计模式之单例模式详解
Jun 09 Javascript
微信小程序商品到详情的实现
Jun 27 Javascript
JavaScript继承的特性与实践应用深入详解
Dec 30 Javascript
JavaScript数据结构与算法之二叉树插入节点、生成二叉树示例
Feb 21 Javascript
开发Node CLI构建微信小程序脚手架的示例
Mar 27 Javascript
基于js判断浏览器是否支持webGL
Apr 18 Javascript
vue实现的多页面项目如何优化打包的步骤详解
Jul 19 Javascript
关于Vue中的options选项
Mar 22 Vue.js
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文本转图片自动换行的方法
2013/03/13 PHP
php操作MongoDB基础教程(连接、新增、修改、删除、查询)
2014/03/25 PHP
JavaScript 学习笔记(五)
2009/12/31 Javascript
js获取元素相对窗口位置的实现代码
2014/09/28 Javascript
JavaScript中用let语句声明作用域的用法讲解
2016/05/20 Javascript
JavaScript中实现键值对应的字典与哈希表结构的示例
2016/06/12 Javascript
JS DOMReady事件的六种实现方法总结
2016/11/23 Javascript
js实现旋转木马效果
2017/03/17 Javascript
Bootstrap 表单验证formValidation 实现远程验证功能
2017/05/17 Javascript
原生JS实现不断变化的标签
2017/05/22 Javascript
js实现本地时间同步功能
2017/08/26 Javascript
bootstrap中日历范围选择插件daterangepicker的使用详解
2018/04/17 Javascript
mpvue 如何使用腾讯视频插件的方法
2018/07/16 Javascript
JS基于ES6新特性async await进行异步处理操作示例
2019/02/02 Javascript
JS绘图Flot应用图形绘制异常解决方案
2020/10/16 Javascript
跟老齐学Python之不要红头文件(2)
2014/09/28 Python
Python中关于字符串对象的一些基础知识
2015/04/08 Python
Python编程django实现同一个ip十分钟内只能注册一次
2017/11/03 Python
PyQt4实现下拉菜单可供选择并打印出来
2018/04/20 Python
python八皇后问题的解决方法
2018/09/27 Python
破解安装Pycharm的方法
2018/10/19 Python
Python人工智能之路 之PyAudio 实现录音 自动化交互实现问答
2019/08/13 Python
Python小白垃圾回收机制入门
2020/06/09 Python
Python二元算术运算常用方法解析
2020/09/15 Python
Jimmy Choo美国官网:周仰杰鞋子品牌
2018/06/08 全球购物
信用社实习人员自我鉴定
2013/09/20 职场文书
学生会部长竞聘书
2014/03/31 职场文书
初中学生评语大全
2014/04/24 职场文书
总经理检讨书
2014/09/15 职场文书
乡镇遵守党的政治纪律情况对照检查材料
2014/09/26 职场文书
刑事撤诉申请书
2015/05/18 职场文书
2016年党校科级干部培训班学习心得体会
2016/01/06 职场文书
js实现上传图片到服务器
2021/04/11 Javascript
全面盘点MySQL中的那些重要日志文件
2021/11/27 MySQL
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
微软Win11 全新照片应用面向 Dev预览版推出 新版本上手体验图集
2022/09/23 数码科技