怎么插入svg_不是吧！你还在花钱定制svg？？

胖友们大家好呀，我是三儿

胖友们绝对想不到吧，一张图居然可以点不同的位置，弹出不同的图片！

点击下方三个手指处，查看隐藏惊喜哦！

??

(强烈建议手机查看)

这也太神奇了吧？是不是需要定制？完全不用！

这是新上的svg样式，超级简单就能实现这样炫酷的操作哦！

话题猜谜，互动型推文都可以用到这个样式哦！接下来就跟着三儿一起来学习下吧！

单图三个触发点弹出图片

ID:101417

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

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

一、如何更换内容？

  

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

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

2.搜索样式ID：101417，找到『svg单图三个触发点弹出图片』样式，插入至编辑器中。

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

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

4.在动画设置界面，点击『图片上传』，分别上传隐藏的三张图片和一张背景图即可。

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

注意：该SVG样式仅支持手机预览！

二、如何修改图片位置？

  

三张隐藏点击就弹出的图片位置怎么调整呢？这就要通过调整源代码才能实现了！

1.点击左上角『HTML』进入源代码模式。

2.修改『justify-content：』之后的代码即可让图片居左、居右、居中。

flex-start代表居左、center代表居中、flex-end代表居右。示意图如下：

3.假设你想将第一张隐藏图片改为居左，即将flex-end改成flex-start即可。

4.修改完毕后可以根据隐藏图片的位置，适当的调整背景图。(不太清楚的还可以看文末的视频版教程)

注意事项：

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

三、视频版教程

  

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

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

胖友们学会了吗？

看在三儿分享干货的份上

点个在看呗~

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

可以留言告诉三儿

·END·

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

■ ■ ■ ■

不看后悔

01

功能更新|支持不修改文章仅保存给他人了！

02

svg教程|这个svg太酷炫了吧！

03

排版教程|你难道还不会做历史文章推荐吗？