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

独角兽企业重金招聘Python工程师标准>>>

一、使用方法

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