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

一、使用方法
由于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移动端广告平台旨在为开发者提供一个简单强大的广告管理工具。所以他的接口设计的极其精致,一个核心单例,完成所有功能;管理系统平台按关注度精细划分。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值