将块级元素转换为不同形状的SVG图形的jQuery插件

shapeshifter是一款可以将块级元素转换为不同形状的SVG图形的jQuery插件。该jQuery插件内置了15种SVG图形，可以将任何div等块级元素转换为这些图形形状。该jQuery插件的特点有：

• 15种内置SVG图形：六角形，星形，五边形，等边三角形，长方形，八角形，九边形，十边形，左向臂章标记，右向臂章标记，消息框，左向直角三角形和右向直角三角形。
• 可以旋转SVG图形。
• 支持图像和颜色填充。

使用方法

使用该SVG图形jQuery插件要引入jQuery和shapeshifter.js文件。

<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>              
              

初始化插件

可以在任何一个<div>元素上调用该SVG图形插件。（最好是在<div>元素元素上使用该插件）。

$('SELECTOR').shapeshifter();                
              

配置参数

要定制SVG图形，可以通过shape参数来实现。可用的图形名称有：hexagon, star, pentagon, eqTriangle, rectangle, rhombus, heptagon, octogon, nonagon, decagon, leftChevron, rightChevron, message, rTriangleLeft, rTriangleRight。

$('SELECTOR').shapeshifter({shape: "leftChevron"});                
              

默认的multiplier属性值为1，SVG图形的尺寸为100x100像素，可以通过改变这个属性来修改图形的尺寸。

$('SELECTOR').shapeshifter({multiplier: 1.5});                
              

要为SVG图形填充颜色可以使用fill属性。该属性接收任何hex，rgb或标准的CSS颜色值。如果要使用图片或GIF动态图片，可以在fillImage参数中插入图片的URL地址。

$('SELECTOR').shapeshifter({fill: "#8BC34A"});
$('SELECTOR').shapeshifter({fillImage: "images/ocean.gif"});                
              

要旋转SVG图形可以使用rotation参数，传入的数值以degrees为单位，要重置SVG图形中的内容，使它会到0度，可以设置rotationOffset:true。

$('SELECTOR').shapeshifter({
  rotation: 20,
  rotationOffset: "true"
});