文档章节

利用SVG制作不规矩背景的链接导航

透笔度
 透笔度
发布于 2016/03/23 10:34
字数 741
阅读 84
收藏 1

我们先看效果:

默认样式布局

 

hover到一个连接上

利用svg制作非常的简单,如果我们利用图片热区或者换背景法相对会麻烦,因为带了hover的背景变化效果,

利用svg可以制作各种不规矩形状,不单单局限在这种处理上,svg可自行脑补,同样在我的博客里也有简单介绍http://my.oschina.net/tbd/blog/607604

下面是程序代码:

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8" /> 
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>demo</title>
</head>
<body>
    <div style="width:520px; height:448px; margin:50px auto; border:#999 solid 1px; background:#1895c3">
        <svg width="320" height="408" version="1.1"
        xmlns="http://www.w3.org/2000/svg" style="margin:20px 100px;">
        <a xlink:href="https://www.baidu.com/" target="_blank">
        <path d="M6 7 L102 5 L102 97 L5 95 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="26" y="57">百度</text> 
        </a>
  <a xlink:href="http://www.qq.com/" target="_blank">
        <path d="M109 5 L207 3 L207 99 L109 97 Z" stroke="#72c6de" fill="#93d5e7"/></path> 
  <text style="font-size:16px" fill="#fff" x="129" y="55">腾讯</text> 
        </a>
  <a xlink:href="https://www.1688.com/index.html" target="_blank">       
  <path d="M214 3 L310 0 L311 101 L214 99 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="53">阿里</text> 
        </a>
  <a xlink:href="http://www.sina.com.cn/" target="_blank">
  <path d="M5 102 L102 103 L102 201 L4 203 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="25" y="152">新浪</text> 
        </a>
  <a xlink:href="http://www.sohu.com/" target="_blank">
  <path d="M109 103 L207 105 L207 199 L109 201 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="129" y="153">搜狐</text> 
        </a>
  <a xlink:href="http://www.163.com/" target="_blank">
  <path d="M214 105 L312 107 L313 198 L214 199 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="155">网易</text> 
        </a>
  <a xlink:href="https://www.taobao.com/" target="_blank">
  <path d="M4 209 L102 208 L102 300 L3 298 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="24" y="259">淘宝</text> 
        </a>
  <a xlink:href="http://www.renren.com/" target="_blank">
  <path d="M109 208 L207 206 L207 303 L109 300 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="129" y="258">人人网</text> 
        </a>
  <a xlink:href="http://my.oschina.net/tbd" target="_blank">
  <path d="M214 206 L313 204 L314 306 L214 303 Z" stroke="#72c6de" fill="#93d5e7"/></path>
  <text style="font-size:16px" fill="#fff" x="234" y="256">透笔度博客</text> 
        </a>
  <a xlink:href="http://www.oschina.net/code/list_by_user?id=2352644" target="_blank">
  <path d="M3 304 L314 312 L316 406 L1 406 Z" stroke="#72c6de" fill="#93d5e7"/></path>
   <text style="font-size:16px" fill="#fff" x="23" y="354">透笔度博客分享实例</text> 
        </a>           
        </svg>
    </div>
</body>
<script type="text/javascript"> 
window.onload=function(){
   
 var bcolor="#93d5e7",bhcolor="#fff";
 var tcolor="#fff",thcolor="#72c6de";
 
 var listp=document.getElementsByTagName("path"); 
 var listt=document.getElementsByTagName("text");   
 for(var i=0;i<listp.length;i++){
  
  listp[i].onmouseover=function(){
   this.setAttribute("fill",bhcolor);
   for(var j=0;j<listp.length;j++){
    if(this==listp[j]){
     listt[j].setAttribute("fill",thcolor);
    }else{
     listt[j].setAttribute("fill",tcolor);
    };
   };
  };
  
  listp[i].onmouseleave=function(){
   this.setAttribute("fill",bcolor);
   for(var j=0;j<listt.length;j++){
     listt[j].setAttribute("fill",tcolor);
   };
  };
  
  listt[i].onmouseover=function(){
   this.setAttribute("fill",thcolor);
   for(var j=0;j<listt.length;j++){
    if(this==listt[j]){
     listp[j].setAttribute("fill",bhcolor);
    }else{
     listp[j].setAttribute("fill",bcolor);
    };
   };
  };
  
  listt[i].onmouseleave=function(){
   this.setAttribute("fill",tcolor);
     for(var j=0;j<listt.length;j++){
     listp[j].setAttribute("fill",bcolor);
   };
  };  
 };
   
};
</script>
</html>

 类似效果,有什么更改调整样式和坐标即可。

 

© 著作权归作者所有

透笔度
粉丝 83
博文 128
码字总数 235452
作品 0
朝阳
前端工程师
私信 提问
HTML5系列-SVG了解

我们对svg进行初步了解 1.介绍 SVG是一种矢量图格式。SVG是Scalable Vector Graphics三个单词的首字母缩写。Adobe Illustrator是专门编辑、制作矢量图的软件工具。SVG是Adobe Illustrator的主...

透笔度
2016/01/21
211
0
程序猿必备的10款超有趣的SVG绘制动画赏析

  SVG作为时下比较新颖的技术标准,已经建立了很多基于SVG的前端项目。由于SVG在绘制路径上非常灵活,我们将很多网页上的元素使用SVG来绘制而成,有各种人物、小图标、小动画等等。今天我们...

爱前端
2017/12/05
0
0
9款超绚丽的HTML5/CSS3应用和动画特效

HTML5 现在已经不是很前卫的东西了,越来越多的网站和移动应用都在不断地尝试使用HTML5来更好地优化用户体验。今天我们要分享9款超绚丽的HTML5/CSS3应用和动画特效,这里面有菜单、按钮、图片...

切切歆语
2017/10/23
599
0
干货分享!HTML5 动效的常见制作手法

原文出处:腾讯ISUX - 田田 众所周知,一个元素,动往往比静更吸引眼球; 一套操作界面,合适的动态交互反馈能给用户带来更好的操作体验; 一个H5运营宣传页,炫酷的动画特效定能助力传播和品...

腾讯ISUX - 田田
2015/12/08
0
0
程序猿必备的10款web前端动画插件一

  1.动画SVG框架幻灯片   在幻灯片之间切换时显示动画SVG帧的实验性幻灯片。不同的形状可以用来创建各种风格。   我们想和大家分享一个实验幻灯片。我们的想法是在从一个幻灯片转换到另...

爱前端
2017/12/08
0
0

没有更多内容

加载失败,请刷新页面

加载更多

面向对象编程

1、类和对象 类是对象的蓝图和模板,而对象是实例;即对象是具体的实例,类是一个抽象的模板 当我们把一大堆拥有共同特征的对象的静态特征(属性)和动态特征(行为)都抽取出来后,就可以定...

huijue
今天
8
0
redis异常解决 :idea启动本地redis出现 jedis.exceptions.JedisDataException: NOAUTH Authentication required

第一次安装在本地redis服务,试试跑项目,结果却出现nested exception is redis.clients.jedis.exceptions.JedisDataException: NOAUTH Authentication required错误,真是让人头疼 先检查一...

青慕
今天
10
0
Spring 之 IoC 源码分析 (基于注解方式)

一、 IoC 理论 IoC 全称为 Inversion of Control,翻译为 “控制反转”,它还有一个别名为 DI(Dependency Injection),即依赖注入。 二、IoC方式 Spring为IoC提供了2种方式,一种是基于xml...

星爵22
今天
25
0
Docker安装PostgresSql

Docker安装PostgresSql 拉取docker镜像 # docker pull postgres:10.1010.10: Pulling from library/postgres9fc222b64b0a: Pull complete 38296355136d: Pull complete 2809e135bbdb: Pu......

Tree
今天
8
0
内容垂直居中

方法一: 采用上下 padding 形式,将内容放置在垂直居中 .line { padding: 2% 0; text-align: center; height: 5px;} <div class="line"> 内容垂直居中</div> 方法二: 采......

低至一折起
今天
20
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部