热门标签 | HotTags
当前位置:  开发笔记 > 后端 > 正文

怎么插入svg_公众号文章SVG使用教程分享

嘿,胖友们大家好呀,我是三儿。每天,困扰在我们新时代新媒体人面前的,不是今天不知道该写啥,也不是粉丝咋又掉了&
88e1eb23f6c719b052a992b8d4f6e6db.png

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

每天,困扰在我们新时代新媒体人面前的,不是今天不知道该写啥,也不是粉丝咋又掉了,而是:今天中午吃啥?

每天一到饭点,公司的外卖群里就开始了灵魂质问:今天吃啥?

这个时候,就轮到貌美如花的小三儿出场了,先来看看三儿是如何解决的吧!

知乎视频​www.zhihu.com

(PS:由于本文转载自135编辑器公众号文章,上面的视频本应是动态展示,由于知乎平台暂时不适应,所以就以录制的方式呈现在此)

中午吃啥我想要吃美食美食就吃它了2020鱼香肉丝黄焖猪蹄宫保鸡丁油焖大虾麻婆豆腐糖醋里脊水煮肉片京酱肉丝

怎么样,是不是特别有意思!这可不是三儿制作的动图,而是135编辑器的SVG样式,除了可以选选择中午吃啥以外,还能自己设置想要的文字哦!

今天,三儿就来教大家如何使用吧!

话不多说,教程开始!

自动轮播样式 ID:98728
【样式作用】:创意SVG,可以与读者进行有效的互动,帮助打造文章氛围。除此之外,还可以结合产品特性,制作出更多的玩法。
【使用说明】:如需要替换文字,请在专业版用动画功能,使用同步功能同步至微信公众号。

一、如何更换文字?

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

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

2e638e7c8c9172ab8206e02be73de5f0.png


2.搜索样式ID:98728,找到『创意切换』样式,插入至编辑器中。

a9460257d57813c16a05ece1e36604ac.png

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

4f9855f7de67226a1c6705de45d2651e.png

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

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

90b4316ce7c991b0e0d3400e8e3516b5.png

这里需要注意的是:需要将所有的文字信息进行修改哦!注意文字不要超过之前的字符,胖友们可以在右侧看到修改后的效果。

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

d0b83c07c209f46e8ed44c16a9b3ae02.png

注意事项:

212152243131c95d7c068e7abe8b1663.png

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

三、视频版教程

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

知乎视频​www.zhihu.com

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

胖友们学会了吗?

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

都可以留言告诉三儿哦

·END·



推荐阅读
  • 全能终端工具推荐:高效、免费、易用
    介绍一款备受好评的全能型终端工具——MobaXterm,它不仅功能强大,而且完全免费,适合各类用户使用。 ... [详细]
  • 从零开始构建完整手机站:Vue CLI 3 实战指南(第一部分)
    本系列教程将引导您使用 Vue CLI 3 构建一个功能齐全的移动应用。我们将深入探讨项目中涉及的每一个知识点,并确保这些内容与实际工作中的需求紧密结合。 ... [详细]
  • 易飞扬宣布推出新型低成本100G OTU4光模块,以满足DPI市场的需求。新产品包括100G CFP2 LR4 10KM和100G OTU4 QSFP28 LR4光模块,具备低功耗和高性能特点。 ... [详细]
  • 本文介绍了一个基于 Java SpringMVC 和 SSM 框架的综合系统,涵盖了操作日志记录、文件管理、头像编辑、权限控制、以及多种技术集成如 Shiro、Redis 等,旨在提供一个高效且功能丰富的开发平台。 ... [详细]
  • 1.如何在运行状态查看源代码?查看函数的源代码,我们通常会使用IDE来完成。比如在PyCharm中,你可以Ctrl+鼠标点击进入函数的源代码。那如果没有IDE呢?当我们想使用一个函 ... [详细]
  • Python处理Word文档的高效技巧
    本文详细介绍了如何使用Python处理Word文档,涵盖从基础操作到高级功能的各种技巧。我们将探讨如何生成文档、定义样式、提取表格数据以及处理超链接和图片等内容。 ... [详细]
  • 如何在CAD查看器中同时打开并对比两张DWG图纸
    本文将详细介绍如何使用专业的CAD查看软件,如迅捷CAD看图,来同时打开和对比两张DWG格式的CAD图纸。无论是在设计审核还是项目管理中,掌握这一技能都能显著提高工作效率。 ... [详细]
  • 编写了几个500行左右代码的程序,但基本上解决问题还是面向过程的思维,如何从问题中抽象出类,形成类的划分和设计,从而用面向对象的思维解决问题?有这方面的入门好书吗?最好是结合几个具体的案例分析的 ... [详细]
  • Ulysses Mac v29:革新文本编辑与写作体验
    探索Ulysses Mac v29,这款先进的纯文本编辑器为Mac用户带来了全新的写作和编辑环境。它不仅具备简洁直观的界面,还融合了Markdown等标记语言的最佳特性,支持多种格式导出,并提供强大的组织和同步功能。 ... [详细]
  • HTML基础入门指南
    本文将深入浅出地介绍HTML的基础知识,包括其定义、开发工具、制定机构、特性、基本标签及更多实用内容。 ... [详细]
  • Python自动化测试入门:Selenium环境搭建
    本文详细介绍如何在Python环境中安装和配置Selenium,包括开发工具PyCharm的安装、Python环境的设置以及Selenium包的安装方法。此外,还提供了编写和运行第一个自动化测试脚本的步骤。 ... [详细]
  • 本文介绍如何在 Visual Studio Code 中使用 Jupyter Notebook 插件,包括创建、编辑和运行笔记本的基本操作。 ... [详细]
  • MySQL Debug 模式的实现与应用
    本文详细介绍了如何启用和使用 MySQL 的调试模式,包括编译选项、环境变量配置以及调试信息的解析。通过实际案例展示了如何利用调试模式解决客户端无法连接服务器的问题。 ... [详细]
  • 使用M函数轻松处理Excel中的多分隔符分列问题
    在处理Excel数据时,经常会遇到需要根据不同的分隔符来拆分单元格中的内容。本文介绍了一种利用M函数在Power Query中实现这一需求的方法,即使面对多种分隔符也能轻松应对。 ... [详细]
  • 当Windows 10系统遇到蓝屏故障时,有时不会显示详细的错误信息,这给问题的诊断带来了困难。本文将介绍如何通过简单的方法使Win10蓝屏时显示具体的错误代码。 ... [详细]
author-avatar
沈婧颖_491
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有