HTML5-可生成漂亮的SVG背景图案的js插件 | 蓝文资源库

geopattern是一款可以生成漂亮的SVG背景图案的js插件。该插件可以通过一个任意字符串来生成一个SVG模式，从而生成SVG背景图案，你可以直接使用这个SVG背景，或者将图案保存为PNG图片。

可以通过npm来安装该插件。

npm install geopattern

使用该插件需要在页面中引入jquery（可选）和geopattern.min.js文件。

<script src="js/jquery.min.js"></script> <!-- 可选 -->
<script src="js/geopattern.min.js"></script>                  

如果你要要一个容器设置背景图案，例如一个div容器。

<div id="geopattern"></div>

可以使用下面的方法来生成背景图案，传入的字符串是任意的，不同的字符串会生成不同的图案。

var pattern = GeoPattern.generate('GitHub');
$('#geopattern').css('background-image', pattern.toDataUrl());               

或者通过jQuery来调用插件。

$('#geopattern').geopattern('GitHub');

GeoPattern.generate(string, options)：返回一个新的背景图案。
- string：使用SHA1算法来生成哈希值，生成的哈希值用于生成背景图案的种子。
- options.color：指定精确的背景颜色。CSS十六进制颜色值。
- options.baseColor：用于控制生成背景图案颜色的基本颜色。CSS十六进制颜色值。
- options.generator：生成的图案。所有的基本图案可以参考这里。
Pattern.color：获取背景图案的颜色，返回一个十六进制的字符串。

GeoPattern.generate('GitHub').color // => "#455e8a"
Pattern.toString() 和 Pattern.toSvg()：获取图案的SVG字符串。
Pattern.toBase64()：以Base64编码的方式获取SVG图案。
Pattern.toDataUri()：以data URI的方式获取SVG图案。例如：data:image/svg+xml;base64,PHN2ZyB...。
Pattern.toDataUrl()：作为CSS background-image属性的值方式来获取SVG图案。

geopattern SVG图案插件的github地址为：https://github.com/btmills/geopattern

网盘下载密码：e6fr

郑重声明：

1 本资源来源于互联网，资源的版权归资源原作者所持有，受《中华人民共和国著作权法》等相关法律保护。

2 由于无法和原作者取得联系，所以上传的部分资源无法先通过原作者的同意就分享给大家了，如本资源侵犯了您（原作者）的权益，请联系我们（微信号 xiaohaimei1989），我们会立马删除您的资源，并向您表达诚挚的歉意！

3 本站是一个公益型网站，分享资源的目的在于传播知识，分享知识，收取一点点打赏的辛苦费是用于网站的日常运营开支，并非用于商业用途。

4 本站资源只提供学习和参考研究使用，使用过后请在第一时间内删除。本站不承担资源被单位或个人商用带来的法律责任。