文档章节

Html5添加SVG生成图案花纹背景样式的js插件教程

大街小巷
 大街小巷
发布于 2016/01/05 16:09
字数 351
阅读 56
收藏 0

一、使用方法
由于Textures.js是基于d3.js的,所以必须引入d3.js文件,同时引入textures.min.js文件。
<script src="js/d3.min.js" charset="utf-8"></script>
<script src="js/textures.min.js" charset="utf-8"></script>   

二、Html结构
该SVG图案花纹背景的HTML结构非常简单,使用一个空的div元素即可。
<div id="example"></div>

三、JavaScript
属性选择要制作图案背景的元素,并通过attr属性来设置它的宽度和高度:
var svg = d3.select("#example").append("svg").attr('width', 140).attr('height', 140);               

然后选择一种图案花纹背景,保存在一个变量中。
var t = textures.lines().thicker();                

接下来就可以通过前面的svg对象来调用该图案了。
svg.call(t);
svg.append("path").attr("d", "M 0 0 L 0 140 L 140 140 L 140 0 Z").style("fill", t.url());     

Keymob移动端广告平台旨在为开发者提供一个简单强大的广告管理工具。所以他的接口设计的极其精致,一个核心单例,完成所有功能;管理系统平台按关注度精细划分。

© 著作权归作者所有

大街小巷
粉丝 8
博文 208
码字总数 130367
作品 0
长沙
私信 提问
16 款加速编码的 HTML5 在线工具

HTML5 是在开发者和设计者之间最流行的语言之一,提供了大量的功能来帮助开发者们快速的设计 web 应用。HTML5 有很多特性,例如支持现代化的浏览器(比如:Firefox 6,Google Chrome,IE9 等...

oschina
2014/01/20
4.3K
3
精选9个值得学习的 HTML5 效果【附源码】

这里精选了一组很酷的 HTML5 效果。HTML5 是现 Web 开发领域的热点, 拥有很多让人期待已久的新特性,特别是在移动端,Web 开发人员可以借助 HTML5 强大功能轻松制作各种交互性强、效果丰富的...

赵小宾
2014/11/27
412
0
为开发者准备的 15 个最棒的 JavaScript 动画库

jQuery给各种效果带来了无限的可能性,他有着简单的、启发性的API,你可以利用它创建你能想到的、甚至你想象不到的效果(有赖于你的创造力和想象力)。 富有创造力的jQuery使用可以为网页设计...

oschina
2014/02/05
15.9K
13
20个最新的 CSS3 和 HTML5 工具

1. Sencha Animator 用标准的网页技术打造超炫的动画,Senchar Animator使用CSS3来打造动态的文字和图片,流畅的变换,阴影,渐变等效果。 2. CSS LINT 这个工具可以帮你找出你CSS中的问题。...

虫虫
2012/02/19
4.3K
3
开源中最好的 Web 开发的资源

学习HTML 5编程和设计 ★ HTML5 Rocks : Major Feature Groups 的学习 HTML5 的资源 (HTML5 演示, 教程 ). 源码 很不错的 HTML5 Dashboard – Mozilla,效果很炫。 WhatWG Developers, 一个清...

红薯
2011/06/09
8.4K
36

没有更多内容

加载失败,请刷新页面

加载更多

全面兼容IE6/IE7/IE8/FF的CSS HACK写法

浏览器市场的混乱,给设计师造成很大的麻烦,设计的页面兼容完这个浏览器还得兼容那个浏览器,本来ie6跟ff之间的兼容是很容易解决的。加上个ie7会麻烦点,ie8的出现就更头疼了,原来hack ie...

前端老手
5分钟前
2
0
常用快递电子面单批量打印api接口对接demo-JAVA示例

目前有三种方式对接电子面单: 1.快递公司:各家快递公司逐一对接接口 2.菜鸟:支持常用15家快递电子面单打印 3.快递鸟:仅对接一次,支持常用30多家主流快递电子面单打印 目前也是支持批量打...

程序的小猿
8分钟前
5
0
Yii 框架中rule规则必须搭配验证函数才能使用

public $store_id;public $user_id;public $page;public $limit;public $list;public $mch_list;public $cart_id;public $is_community;public $shop_id;public $cart_typ......

chenhongjiang
11分钟前
2
0
Flutter使用Rammus实现阿里云推送

前言: 最近新的Flutter项目有“阿里云推送通知”的需求,就是Flutter的App启动后检测到有新的通知,点击通知栏然后跳转到指定的页面。在这里我使用的是第三方插件Rammus来实现通知的推送,之...

EmilyWu
11分钟前
23
0
Knative 实战:三步走!基于 Knative Serverless 技术实现一个短网址服务

短网址顾名思义就是使用比较短的网址代替很长的网址。维基百科上面的解释是这样的: 短网址又称网址缩短、缩短网址、URL 缩短等,指的是一种互联网上的技术与服务,此服务可以提供一个非常短...

阿里巴巴云原生
26分钟前
2
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部