秀米svg点击图片出现文字

您问的是如何使用秀米的svg排版功能做出点击图片出现文字的效果吗？用到的工具有：电脑、Windows旗舰版、秀米编辑器、需要排版的图片及文字。

1、在秀米编辑器中点击“布局”，选择“基础布局”。

2、然后找到SVG布局，点击SVG布局后我们会发现它有内外两个框。

3、在内框中编辑填充我们想要的内容，支持视频、图片、动图和图文模板等。

4、填充完成后，点击外框，在d出的编辑栏上面点击“动画”按钮。

5、在d出的编辑框里面，动画方式选展开，再根据图文的长度和点击前要展示的内容设置适当动画时长和宽高比。

6、点击上方的预览功能，一篇可以和读者互动的SVG图文就做好啦。

7、确定好编辑的内容后，就可以点击上方的小勾图标通过同步或复制的方式放到微信公众平台。

1、网上搜索矢量图标库，比如教程中用到的是“阿里巴巴矢量图标库”。进入网站选择风格一致的图标，点选进行下载~

2、使用font-face声明字体。font-family是自定的字体名称，url是字体文件的存放路径，format是字体文件格式。

@font-face {

font-family: 'iconfont'/*自定的字体名称*/

src: url('iconfont.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */

url('iconfont.woff') format('woff'), /* chrome、firefox */

url('iconfont.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/

url('iconfont.svg#iconfont') format('svg')/* iOS 4.1- */

}

3、定义一个css样式，使用iconfont字体。

.iconfont{

font-family:"iconfont" !important

font-size:16pxfont-style:normal

-webkit-font-smoothing: antialiased

-webkit-text-stroke-width: 0.2px

-moz-osx-font-smoothing: grayscale

}

4、挑选相应图标并获取字体编码，将样式应用于页面即可。

<i class="iconfont">3</i>

*** 作步骤如下：

1、使用浏览器，登陆网页https://www.bejson.com/convert/image_to_svg/。

2、查看是否是自己图片的格式，点击右上角的上传文件。

3、选择需要上传的文件，并按打开进行选择。

4、等待文件加载完成。

5、点击下方的保存SVG格式文件，并选择将图片保存在自己的电脑上。

6、文件生成成功，即可使用。

---