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移動端廣告平臺，爲廣告主提供專業的推廣服務，擁有豐富，穩定，優質的媒體資源。廣告效果好，填充率高。