geopattern-可生成漂亮的SVG背景图案的js插件

当前位置:主页 > Html5库 > SVG > geopattern-可生成漂亮的SVG背景图案的js插件
geopattern-可生成漂亮的SVG背景图案的js插件
分享:

    插件介绍

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

    浏览器兼容性

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

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>                  
                
HTML结构

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

<div id="geopattern"></div>
                
初始化插件

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

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

或者通过jQuery来调用插件。

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

API

  • 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