web299.com
全部
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
首页
教育
语言/资格考试
法律
互联网
政务民生
Word模板
Excel模板
PPT模板
网页特效
小程序模板
网站模板
当前位置：
首页
>
网页特效
>
背景
HTML5 SVG生成图案花纹背景样式的js插件
分类：
背景
日期：
2024-05-14
点击(0)
评论(0)
演 示
免费下载
简介
由于Textures.js是基于d3.js的，所以必须引入d3.js文件，同时引入textures.min.js文件。 ```html <script src="js/d3.min.js" charset="utf-8"></script> <script src="js/textures.min.js" charset="utf-8"></script> ``` ##### HTML结构 该SVG图案花纹背景的HTML结构非常简单，使用一个空的div元素即可。 ```html <div id="example"></div> ``` ##### JAVASCRIPT 在文档的最后，可以通过下面的方法来使用该图案花纹背景插件。以一个线条背景为例： 属性选择要制作图案背景的元素，并通过attr属性来设置它的宽度和高度： ```html var svg = d3.select("#example").append("svg").attr('width', 140).attr('height', 140); ``` 然后选择一种图案花纹背景，保存在一个变量中。 ```html var t = textures.lines().thicker(); ``` 接下来就可以通过前面的svg对象来调用该图案了。 ```html 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()); ```
相关推荐
html5浪漫粒子表白文字特效
SlidesJS幻灯片特效
html5瀑布流相册特效
css3 svg实现的情人节表白鲜花动画特效
t-scroll.js基于ES6的DOM元素,过渡动画库插件
纯js写省市区三级联动效果
广告
广告
