服务器维护问题解决不了?低至10元,帮您解决!加微信直接与技术聊。

网上关于微信公众号svg相关的资料比较少,所以永易搜建站就想着补充一下这方面的教程资料。这次就分篇章,用实例来教大家怎么做SVG教程。
第一步,当然就是了解SVG。
SVG 意为可缩放矢量图形(Scalable Vector Graphics)。他是使用 XML格式定义图像,所以是把一个图形写成了xml代码供大家使用。
不同于传统图片的是,它可以设置一些动画,还可以在动画上添加点击事件。这是我们做svg交互动画的意义。在微信公众号里,不能添加js,所以想要做交互,svg是唯一的选择。
svg可以是单独的文件,也可以是html中的代码,因为我们主要谈的是微信公众号中svg交互动画,所以直接只讲svg的html代码。
<svg width="100%" height="100%" version="1.1" xmlns="http://www.w3.org/2000/svg">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>
特征是:
1、用svg标签包裹
2、内部用各种标签来描绘适量图形,具体如下:
矩形<rect>
圆形 <circle>
椭圆 <ellipse>
线 <line>
折线 <polyline>
多边形 <polygon>
路径 <path>
<svg style="display: inline-block;width: 100%;background-image:url(bg.jpg);" version="1.1" viewBox="0 0 640 800" xmlns="http://www.w3.org/2000/svg">
<g style="transform: translate(120px, 560px);opacity: 0;">
<rect width="300" height="100" style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
<animate attributeName="opacity" begin="click+0.5" dur="0.1s" values="0;1" fill="freeze" restart="never"></animate>
</g>
</svg>
(代码并不严谨,只是为了说明意思)
因为这些代码里边没有用到js,又实现了点击交互。所以可以用于微信公众号文章里。
十六年网站建设相关经验
一站式为您提供网站相关服务
还没有人来评论,快来抢个沙发吧!