HTML5 SVG生成图案花纹背景样式的js插件

当前位置:主页 > Html5库 > SVG > HTML5 SVG生成图案花纹背景样式的js插件
HTML5 SVG生成图案花纹背景样式的js插件
分享:

    插件介绍

    Textures.js是一款非常实用的HTML5 SVG生成图案花纹背景样式的js插件。该js图案花纹背景插件基于d3.js,可以生成各种SVG图案花纹背景。这些图案包括各种线条、圆点、网格等,你甚至还可以自定义图案。

    浏览器兼容性

    浏览器兼容性
    时间:03-23
    阅读:
简要教程

Textures.js是一款非常实用的HTML5 SVG生成图案花纹背景样式的js插件。该js图案花纹背景插件基于d3.js,可以生成各种SVG图案花纹背景。这些图案包括各种线条、圆点、网格等,你甚至还可以自定义图案。

图案花纹在显示不同类别的图形时是非常有用的,例如下面的一张用不同线条区分不同区域的地图:

map

下图展示了部分的图案花纹背景:

svg图案花纹背景

使用方法

由于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());