微信SVG使用指南 01

最新推荐文章于 2024-09-24 10:09:26 发布

MuTsing

最新推荐文章于 2024-09-24 10:09:26 发布

阅读量3.2k

点赞数 3

文章标签： svg

本文链接：https://blog.csdn.net/MuTsing/article/details/118108871

版权

前言

【什么是svg】

HTML5是编写网页骨架的语言，</>是其典型格式。<svg>是其中一类标签，用于在网页中创建一个空画布，通过写下子标签，我们就可以在画布上创作新元素与对应的动效。我们通过编写代码的方式，在这个画布上作画与实现动效。如果了解过其他语言中的canvas画布，可以把svg直接理解为canvas。

【什么是微信推送中的svg】

我们在微信推送中插入svg，但为了维护和管理，官方对我们上传的内容会进行代码阉割，因此不是所有你日常见到的网页动效都能应用到微信推送中。详见jzcreate发布的白名单。基本地来说，这里不能存储变量，不能响应除了按拉交互以外的大部分事件，对网页跳转有严格限制。

如无特殊说明，本系列中所有"svg"都指微信推送环境下的svg。

【其他建议】

技术是锦上添花，内容是雪中送碳。现在秀米XIUMI、135编辑器、E2编辑器都有很强大的svg功能： “如无必要，勿增实体”。
尽管是简单的标签语言，但还是建议自己打代码从零开始练习。
建议的公众号：JzCreate，荒村，yiesbsite，小编备用（这都是svg刚兴起时的头部公众号，我有段时间没关注了，请自己留意）
建议看的书：《硬核运营》，Jz的官方小册子，传媒部有一本公共纸质版（17出资）

~~本系列中非必要的语句都会用删除线划掉，但仍然可以读读。~~

创建一个画布！

打开一个能编写代码的软件，最好能支持h5高亮（如sublime），并写下这些：

<svg width='300' height='300' style="background-color:black">
</svg>
<!--这是一个svg画布-->

然后另存为后缀为 .html 的文件，就可以在浏览器中打开并看到一个黑色的画布：

代码通俗易懂，但还是说明一下：

<svg></svg>被称为一个闭合标签，一般标签都要写闭合。~~除了表示换行的</br>和曲线<path ... />标签。~~
xxx = "nnn" 或 xxx:nnn 被称为属性值，在很多语言中都能见到（键值对）。但根据规则，并不是所有的属性值都能以xxx = "nnn" 的形式写出，因此需要以xxx:nnn的形式嵌套在style= "xxx:nnn"中，并用分号分割彼此。具体的可以在语言手册中查询，或者自己试一试。偷懒办法：一切属性都能以xxx:nnn的形式放进style.
表示长度的数值默认单位为px
~~html中空字符不敏感，单双引号不敏感，大小写一般不敏感。（很快乐不是吗！）~~
~~ 代表备注，不会被执行。在大部分编写器中都可以用ctrl + /切换。~~

图形基础

这里只需要理解一下原理，但也请记住属性的对应英文，大部分图形我们都会用Adobe Illustrator（下称AI）绘制并导出为静态的svg文件。

好，我们幼儿园二年级绘画课上学过一般的矢量图形有两大要素：轮廓和填充。

【1】轮廓有曲直之分：

1、直线类的轮廓（就是多边形）的逻辑为两点确定一线，点由二元组表述，点和点之间用空格间隔，如下图就能确定一个四边形。

<svg width='300' height='300' style="background-color:black">
    <polygon points="50,60 150,50 120,150 50,150" fill="red">
    </polygon>
</svg>

2、曲线类的轮廓用贝塞尔描述，代码很复杂我也搞不懂。但所幸我们都用AI直出，并可以用后文将提到的from-to做简单的补间动画。~~如果你想做复杂的曲线变形动画建议用AE生成gif。~~

<!--略去画布-->
<path d="M562,233c0,0-37-92-115-50s-117,197-17,277s157,121,157,121s-16-40,53-115s161.67-136,132-225c-23-69-98-110-155-69
	C569.58,206.11,562,233,562,233z"/>

【2】轮廓也有其他属性

以上属性请背出，并且记住opacity是不透明度，值越高越实。

【3】颜色

颜色只会在填充fill和线色stroke中使用，且必须使用#RGB的格式，这可以很容易在PS或AI中取色，不需要自己写。但为了避免看不懂某些AI导出的代码，你需要了解以下：

RGB表示红黄蓝三色混合，是屏幕的显色逻辑，一般用二进制三元组如(255,245,234)或六位十六进制eaa5f9写出。
#RGB是十六进制数据，#相当于标识头，上图中的#eaa5f9代表#RGB中R=ea,G=a5,B=f9混合而成的颜色。
- 你可能会看到#eaa三位的，那就是R=e,G=a,B=a
#RGBA是#RGB变体，#eaa5f999代表上面这个粉色且不透明度为99/100（16进制）
- 你可能会看到#eaa9四位的，那就是R=e,G=a,B=a,Alpha=9/10（16进制），七位同理。

不支持渐变色，kuso！