编辑器中的svg样式如何更换内容

元宵节快到了，来一波元宵节创意svg！

编辑器中的svg样式如何更换内容？

135编辑器在专业版中特意添加了『动画』按钮，可以在『动画』设置中对SVG样式进行修改。

1.首先将编辑器切换至专业版，点击右侧『更多功能』，在d出的菜单中选择『切换专业版』，即可将编辑器切换为专业版。

2.搜索样式ID，插入至编辑器中。

3.点击选中样式（在样式周围出现虚线框时，才算选中哦！），在d出的菜单栏中，选择『动画』按钮，进入动画设置界面。

这里需要注意的是：只有SVG样式才会有动画按钮哦，普通的样式是没有动画按钮的！

4.在动画设置界面，点击『编辑样式原图』。

5.页面跳转到比格设计，修改图片元素后，点击完成即可修改成功。

6.设置完所有内容以后，点击右侧菜单栏中的『手机预览』进行测试，查看效果。

学会了吗？学会了就赶快安排上吧。

方法/步骤

HTML结构

该鼠标点击按钮特效中每一个可点击的元素都是一个<button>按钮

CSS样式

以下是该css3点击按钮特效的通用CSS样式：

插件中通过在点击按钮时使用javascript来为它添加相应的动画CLASS来执行动画效果：

上面的CSS代码可以生成如下图的动画效果：

在“Stana”效果中，使用了html5 SVG clipPath，在它上面添加了一个transition。这个效果只能在Chrome浏览器中才能看到效果。

在“Stoja”效果中使用了CSS clip-path属性，这个效果也需要浏览器的支持才能看得到的。

---