html svg文件 热区,前端常识 【svg+热区】处理平面图
前端知识 【svg+热区】处理平面图
1.背景:
为了更加直观的显示仓库系统中某个仓库中货架的库存情况,需要用平面图来展示,(需要动态文字,动态效果,比如点击事件等),尼玛,还居然不是很有规则。大小不一等,于是纠结起来...
2.传统的做法
label 绝对定位。但是这样往往做起来比较苦逼,遇到规则的还好,遇到不规则的就玩蛋去了。。。
3.创新做法
热区+svg 技术。下面开始一一分析
1.热区,大家都应该了解,使用DW就可以很容易的画出来
、(蓝色区就是热区)
2.svg
什么是SVG?(详细看w3c介绍)
SVG 指可伸缩矢量图形 (Scalable Vector Graphics)
SVG 用来定义用于网络的基于矢量的图形
SVG 使用 XML 格式定义图形
SVG 图像在放大或改变尺寸的情况下其图形质量不会有所损失
SVG 是万维网联盟的标准
SVG 与诸如 DOM 和 XSL 之类的 W3C 标准是一个整体
3.svg可以做什么
svg 可以帮助我们很容易的画图,利用x y定位。
4.上面,利用热区,我们在dom页面上发现生成了很多
上面的coords就是x,y坐标,那么有了这个,我们还不容易操作吗?
5.那么我们就开始用svg吧
svg是前端工具,那么有没有比较好的svg js库呢,有了。推荐使用Raphael
var paper = Raphael(0, 0, 900, 500); //创建画图
var areas = $('area'); //获取热区
$.ajax({
type: 'post',
data: { rows: 1000, page: 1 },
url: 'a.xml',
dataType: 'json',
success: function (data) {
var rows = data.rows;
$.each(areas, function (index, item) {
var xy = $(item).attr('coords').split(','); //获取坐标
paper.rect(parseInt(xy[0]), parseInt(xy[1]), parseInt(xy[2]) - parseInt(xy[0]), parseInt(xy[3]) - parseInt(xy[1])) //创建矩形
.attr({ fill: '#fff', 'cursor': 'pointer', 'stroke-width': 0 })
.data("i", (index + 1))
.mouseover(function () { //移入事件
this.attr({ fill: '#ecda3b', "stroke-opacity": 0.5, 'stroke-width': 0 });
})
.mouseout(function () { //移出事件
this.attr({ fill: '#fff', 'stroke-width': 0 });
})
.click(function () { //点击事件
_self._infoAction('B' + $('.typeid').text() + '-' + this.data("i"));
});
paper.text(parseInt(xy[2])-10, parseInt(xy[3]) -5, 'B' + $('.typeid').text() + '-' + (index + 1)).attr({ 'font-size': 9 }); //创建描述
});
最后,就完成了。见下面效果
html svg文件 热区,前端常识 【svg+热区】处理平面图相关推荐
- svg标签和svg文件区别_SVGO减少SVG文件大小的三种方法
svg标签和svg文件区别 This article is part of a series created in partnership with SiteGround. Thank you for ...
- python读取svg文件_Python lxml解析svg文件
我试图从 http://kanjivg.tagaini.net/解析.svg文件,但我无法成功提取内部信息. 0f9ab.svg的一部分如下所示: 我的.py文件: import lxml.etree ...
- 50兆 svg 文件超过_用svg+css3实现支付宝App波浪功能
在使用支付宝的时候,我发现了一个很有意思的功能--波浪效果,于是我钻研了一下午,觉得这玩意还真是挺有意思,大致是svg+css3来实现 于是我就简单仿写了一个波浪特效 照例,直接上功能,不多解释 知乎 ...
- 如何使用 Echarts 和 SVG文件写大屏可视化地图 ?
点击上方蓝字关注趣谈前端 转自: https://juejin.cn/post/7009889635618799630 契机 最近公司要做一个政务大屏项目,由于在员工竞优大会上表(jing)现(chu ...
- python 绘制图表生成svg文件_python用Pygal如何生成漂亮的SVG图像详解
前言 SVG可以算是目前最最火热的图像文件格式了,它的英文全称为Scalable Vector Graphics,意思为可缩放的矢量图形.它是基于XML(Extensible Markup Langu ...
- html svg文件怎么打开,SVG 在 HTML 页面
SVG 文件可通过以下标签嵌入 HTML 文档:. 或者 . SVG的代码可以直接嵌入到HTML页面中,或您可以直接链接到SVG文件. 使用 标签 :优势:所有主要浏览器都支持,并允许使用脚本 缺点: ...
- java操作svg文件
/* * 功能:解析svg文件,并对svg文件进行操作 */ package svgapplication; import java.awt.BorderLayout; import java. ...
- svg文件上传公众号生成微信链接
这是一个svg文件的代码, <svg width="640" height="480" xmlns="http://www.w3.org/200 ...
- 将图片转换成svg文件,自定义icon小图标,svg速成
将图片转换成svg文件,自定义icon小图标,svg速成 一.svg是什么? 二.操作步骤 1.进入网站 2.将svg复制 3.引用svg文件 总结 一.svg是什么? SVG是一种图像文件格式,它的 ...
最新文章
- 【组队学习】【29期】6. 动手学数据分析
- NSProxy的理解和使用
- 微信小游戏开发教程-2D游戏原理讲解
- C#的反射机制调用方法
- SpringCloud运行时刷新数据源相关配置
- 来,看看你的单片机程序有多大!
- linux的技术点,给你的Linux系统上点stress
- 移除镜像_这是否是你心目中的英雄联盟手游?镜像地图。水晶塔,传送移除
- linux 可执行文件去除绝对路径
- 清华大学计算机音乐,校长杯十强故事汇 || DeepMusic:音乐也能如此“深邃”
- Python学习七文件和数据格式化
- 蓝桥web模拟赛:时间管理大师
- OrCAD Capture CIS 16.6 - 为元器件添加属性
- 【无标题】 R语言下载keras最新方法
- python结巴分词实例_python 结巴分词(jieba)详解
- Spark面试精选题(03)
- Problem F. Asperger Syndrome
- 深入C++对象模型(1) -- C++的三种模型
- Python微信打飞机游戏编程学习笔记01
- 如何在xcode中添加新字体【ttf】