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

时间：2016-01-05 10:53:42 阅读：198 评论：0 收藏：0 [点我收藏+]

标签：

一、使用方法
使用该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"
});

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

标签：

踩

(0)

评论一句话评论（0）

key

加入时间：2016-01-05

关注此人发短消息

文章分类

默认分类（277）

“key”关注的人------（0）

“key”的粉丝们------（0）