svg 在线编辑器如何设置透明呢_想不到吧,我的svg居然可以自己动!

5726c6be9352582c90d821e3064bfe05.gif

嘿,胖友们大家好呀,我是三儿。

最近有胖友在后台留言,问三儿有没有无缝左右滑动样式。

7f03b1e31746445ac1ab2413994fdac0.png

这不,三儿今天就给大家带来了上下左右无缝自动轮播样式,都不用手滑动,自动轮播切换。先来看看我们本期的SVG样式是什么效果吧↓

自动上下左右轮播

怎么样,这个滑动样式是不是有点不一样?丝滑流畅,自动轮播,搭配合适的图片就能够实现炫酷的效果!悄悄告诉大家,苹果就在推文中使用过类似的效果!

今天,三儿就来教大家如何使用吧!话不多说,教程开始!

2be6fa8a1da65d57ee4b1344bb41d7fb.png

上下左右切换图片样式

ID:100167

【样式作用】:创意SVG,可以与读者进行有效的互动,帮助打造文章氛围。除此之外,还可以结合产品特性,制作出更多的玩法。

【使用说明】:如需要替换图片,请在专业版用动画功能,需要使用同步功能同步至微信公众号。

一、如何更换内容?

  

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

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

84f99ad2862d6dd4261df703355f7505.png


2.搜索样式ID:100167,找到『上下左右切换图片』样式,插入至编辑器中。

ec07a788b60e9b466ac2d1e2a9d1c604.png

3.点击选中样式(在样式周围出现虚线框时,才算选中哦!),在弹出的菜单栏中,选择『动画』按钮,进入动画设置界面。

bbd6e1090acb633480a11a64ae920c5a.png

这里需要注意的是:只有SVG样式才会有动画按钮哦,普通的样式是没有动画按钮的!

4.在动画设置界面,我们就可以对样式内的图片进行更换了,胖友们可以选择『图片上传』按钮对图片进行替换。

e63ce4ddc86c973adb43d580c628dacb.png

注意:图片播放顺序是倒序播放,建议从最后一张开始倒序上传图片哦。

5.在图片上传界面,选择按样式图片比例裁剪上传。

e63711145de204e65cc2b26878fa5334.png

这里需要注意的是:该样式只支持【4】张图片的切换,但是要上传5次图片,因为首图和尾图需要保持是同一张图片才能实现无缝轮播,否则会导致样式显示出现问题哦!

5.设置完所有内容以后,胖友们可以在右侧的预览框中进行测试,也可以返回编辑器界面,点击右侧菜单栏中的『手机预览』进行测试。

a8486f9887d8a3c5b5b8586b05e3f513.png

注意事项:

243e77170c30014e424b0fda09d32613.png

这里需要注意的是,由于微信后台限制,所以排版完成后的推文需要使用保存同步功能,如果使用复制粘贴会导致样式失效哦!

98c50665eeafdff094105a78346d5cc6.gif

二、视频版教程

  

三儿还为你们录制了一段视频版的教程,胖友们可以结合视频版的内容进行操作哦!

41cdfb82b9df94be424d5cd802848968.gif

好啦,今天的教程就到这里啦

胖友们学会了吗?

如果你还有关于其它样式的疑问

都可以留言告诉三儿哦

·EN

文章排版由135编辑器提供技术支持

■ ■ ■ ■

60a58805ca942758f514cb7e2c74547b.gif

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
您好,mxgraph 是一个图形编辑器,可以用来创建和编辑各种图形,包括 SVG。如果想要在 mxgraph 中添加流SVG 画,可以考虑使用 mxGraph 中的 Overlay 功能。 Overlay 是一个可以在图形上叠加额外的元素,比如文字、图标、甚至是 HTML 元素。在 mxGraph 中,可以通过 mxCellOverlay 类来创建 Overlay,然后使用 mxGraph.addCellOverlay() 方法将 Overlay 添加到图形上。 要添加流SVG 画,可以先创建一个包含画的 SVG 文件,然后将其作为 mxCellOverlay 添加到图形上。具体步骤如下: 1. 创建 SVG 画文件,可以使用 Adobe Illustrator 等工具来创建。 2. 将 SVG 文件加载为 mxImage 对象,可以使用 mxUtils.load() 方法来加载 SVG 文件,然后将其转换为 mxImage 对象。 ```javascript var svgUrl = 'path/to/your/svg/file.svg'; var svgImage = mxUtils.load(svgUrl); ``` 3. 创建 mxCellOverlay 对象,并将 SVG 图像作为 mxImage 设置为其图标。 ```javascript var overlay = new mxCellOverlay(svgImage, 'Overlay tooltip'); ``` 4. 将 Overlay 添加到图形中,可以使用 mxGraph.addCellOverlay() 方法。 ```javascript var cell = graph.getModel().getCell(cellId); graph.addCellOverlay(cell, overlay); ``` 这样就可以在 mxgraph 中添加流SVG 画了。需要注意的是,SVG 画文件的大小和位置需要与 mxgraph 中的图形匹配,否则可能会出现位置和大小不一致的问题。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值