Html5添加块级元素转换为不一样形状的SVG图形的jquery插件教程

1、使用方法
使用该SVG图形jQuery插件要引入jQuery和shapeshifter.js文件。
<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>

2、初始化插件
能够在任何一个<div>元素上调用该SVG图形插件。（最好是在<div>元素元素上使用该插件）。
$('SELECTOR').shapeshifter();

3、配置参数
定制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"
});          

KeyMob移动端广告平台，为广告主提供专业的推广服务，拥有丰富，稳定，优质的媒体资源。广告效果好，填充率高。