当前位置：首页 > 网页特效 > svg

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

分类：svg 日期：2024-05-14 点击(0) 评论(0)

简介

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

```html
<script src="jquery.min.js"></script>
<script src="scripts/shapeshifter.js"></script>    
```          
#####  初始化插件
可以在任何一个div元素上调用该SVG图形插件。（最好是在div>元素元素上使用该插件）。

```html
$('SELECTOR').shapeshifter();   
```             
#####  配置参数
要定制SVG图形，可以通过shape参数来实现。可用的图形名称有：hexagon, star, pentagon, eqTriangle, rectangle, rhombus, heptagon, octogon, nonagon, decagon, leftChevron, rightChevron, message, rTriangleLeft, rTriangleRight。

```html
$('SELECTOR').shapeshifter({shape: "leftChevron"}); 
```               
默认的multiplier属性值为1，SVG图形的尺寸为100x100像素，可以通过改变这个属性来修改图形的尺寸。

```html
$('SELECTOR').shapeshifter({multiplier: 1.5});     
```           
要为SVG图形填充颜色可以使用fill属性。该属性接收任何hex，rgb或标准的CSS颜色值。如果要使用图片或GIF动态图片，可以在fillImage参数中插入图片的URL地址。

```html
$('SELECTOR').shapeshifter({fill: "#8BC34A"});
$('SELECTOR').shapeshifter({fillImage: "images/ocean.gif"});   
```             
要旋转SVG图形可以使用rotation参数，传入的数值以degrees为单位，要重置SVG图形中的内容，使它会到0度，可以设置rotationOffset:true。

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

web299.com

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

简介

html5浪漫粒子表白文字特效

SlidesJS幻灯片特效

html5瀑布流相册特效

css3 svg实现的情人节表白鲜花动画特效

t-scroll.js基于ES6的DOM元素,过渡动画库插件

纯js写省市区三级联动效果