新媒体运营技能 SVG图文交互基础 01

Posted 2023-03-14

参考技术A

我们把SVG交互设计想象成作画的过程，假设一个100*100像素的画布。

<circle>...</circle>
绘制一个圆形，只需要知道圆心坐标和半径。

circle 圆
cx圆心横坐标
cy 圆心纵坐标
r 半径
fill是填充色
stroke 描边
stroke-width 描边宽度

颜色可以有三种表达方式，例如红色怎么表示？
①颜色英文 例如：fill="red"
②16进制 例如：fill="#ff0000"
③RGB 例如 ：fill="rgb(255,0,0)"

<rect>...</rect>

绘出一个矩形，需要起始位置坐标（x和y），和宽度（width），高度（height）。

注意：当的时候，画布是整个网页的宽度。

矩形的起点坐标，就是矩形的左上角的坐标。

注意：x 、y、width、height可以单独变化，也可以一起变化。

<animate attributeName="x" from="50" to="250" dur="3s" repeatcount="2" fill="remove">

动画元素<animate>...</animate>

attruibuteName 属性名
from 初始值
to 终值
dur 持续时间
repeatcount 重复次数
①可以填入具体的数值，例如2，就表示动画重复2次
②可以填入“indefinite”,表示无限循环

fill=" "
①remove 动画结束后保持在起始位置
②freeze 动画结束后保持在终止位置

圆形动画，圆的半径可以变化

<animate attributeName="r" values="50;70;90" keyTimes="0;0.2;1" dur="4s">
</animate>

values="50;70;90" 圆的半径 从50->70->90

格式
values="参数1;参数2;参数3......."
可以看出来可以定义动画的多个关键帧，而from 和to来只能定义参数的起始和结束。

keyTimes="0;0.2;1"
keytimes 在默认的状态下，第一个时间值为0，最后一个时间值为1。是values对应的时间分配比

意思就是，半径50->70动画分配 4x0.2=0.8s的时间，70->90，分配了4 x0.8=3.2s的时间。