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 相关文章推荐
使用TextRange获取输入框中光标的位置的代码
Mar 08 Javascript
JS/jQuery实现默认显示部分文字点击按钮显示全部内容
May 13 Javascript
SuperSlide标签切换、焦点图多种组合插件
Mar 14 Javascript
详解JavaScript中常用的函数类型
Nov 18 Javascript
浅谈JavaScript中promise的使用
Jan 11 Javascript
Angular 实现输入框中显示文章标签的实例代码
Nov 07 Javascript
Vue press 支持图片放大功能的实例代码
Nov 09 Javascript
Vue分页器实现原理详解
Jun 28 Javascript
layui实现三级联动效果
Jul 26 Javascript
js动态获取时间的方法分析
Aug 02 Javascript
Vue在chrome44偶现点击子元素事件无法冒泡的解决方法
Dec 15 Javascript
JS实现动态无缝轮播
Jan 11 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类
2006/11/27 PHP
深入探讨PHP中的内存管理问题
2011/08/31 PHP
基于PHP Web开发MVC框架的Smarty使用说明
2013/04/19 PHP
解析php中的fopen()函数用打开文件模式说明
2013/06/20 PHP
析构函数与php的垃圾回收机制详解
2013/10/28 PHP
PHP eval函数使用介绍
2013/12/08 PHP
ThinkPHP3.1新特性之内容解析输出详解
2014/06/19 PHP
PHP互换两个变量值的方法(不用第三变量)
2016/11/14 PHP
浅谈PHP的反射机制
2016/12/15 PHP
php获取ip及网址的简单方法(必看)
2017/04/01 PHP
文本加密解密
2006/06/23 Javascript
ExtJs3.0中Store添加 baseParams 的Bug
2010/03/10 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
JavaScript实现多维数组的方法
2013/11/20 Javascript
javascript中style.left和offsetLeft的用法说明
2014/03/07 Javascript
javascript去除空格方法小结
2015/05/21 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
ES6 Promise对象概念与用法分析
2017/04/01 Javascript
详解如何用babel转换es6的class语法
2018/04/03 Javascript
微信小程序实现form表单本地储存数据
2019/06/27 Javascript
Node.js实现批量下载图片简单操作示例
2020/01/18 Javascript
vue中英文切换实例代码
2020/01/21 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
python基于socket实现的UDP及TCP通讯功能示例
2019/11/01 Python
tensorflow 获取所有variable或tensor的name示例
2020/01/04 Python
如何在网站上添加谷歌定位信息
2016/04/16 HTML / CSS
HTML5 textarea高度自适应的两种方案
2020/04/08 HTML / CSS
失业者真诚求职信范文
2013/12/25 职场文书
老师自我鉴定范文
2013/12/25 职场文书
小学生演讲稿
2014/01/12 职场文书
教师四风问题对照检查材料
2014/09/26 职场文书
2014最新预备党员思想汇报范文:中国梦,我的梦
2014/10/25 职场文书
事业单位个人查摆问题及整改措施
2014/10/28 职场文书
2014幼儿园中班工作总结
2014/11/10 职场文书
2015年秋季小学开学典礼主持词
2015/07/16 职场文书
2016年父亲节寄语
2015/12/04 职场文书