CSS 轻松制作 SVG 动画

devpoint

关注

发布于: 4 小时前

如果从未在前端使用过 SVG，那么就错过了很多改善性体验，如果不知道如何使用 SVG 制作动画，那么将错过更多。本文开始制作第一个 SVG 图形，为其添加动画。

在开始之前，先来简单介绍一下什么是 SVG：是一种用于创建二维图形（也支持动画）的标记语言，通过在 HTML 中添加 <svg> 标签来使用。文中涉及的动画效果请查看动画效果。

创建 SVG

可以自己创建 SVG 图形，但是可能会不那么直观，可以借助一些在线工具来完成 SVG 图形的创建。

推荐两个在线工具：

Inkscape 是创建复杂图形的必备工具，而 Haikei 是一个很棒的工具，只需单击几下按钮即可创建抽象形状。

下面通过 Haikei 来创建一个 SVG 图形，按照步骤操作：

设置好了之后，选择下载 SVG ，将 SVG 文件下载下来。

创建动画

关于 CSS 创建动画效果的知识，可以参阅《CSS交互动画指南之keyframes》和《CSS交互动画指南之transition》。

在为 SVG 创建动画之前，先来实现一个笔触偏移动画，使用 Inkscape 创建了一个简单的形状：

下面把常见的图形加入到 HTML 文件中：

<svg    id="visual"    preserveAspectRatio="none"    xmlns="http://www.w3.org/2000/svg"    xmlns:xlink="http://www.w3.org/1999/xlink"    version="1.1">    <path        d="m 77.338983,69.55932 c 0.241396,-4.891293 -1.741999,-9.849292 -5.290339,-13.224542 -3.54834,-3.375249 -8.599253,-5.10842 -13.472374,-4.622913 -3.445554,0.343279 -6.731338,1.736952 -9.610169,3.661015 -6.982481,4.666733 -11.649779,12.610347 -12.407317,20.974531 -0.757539,8.364183 2.38414,16.98524 8.288673,22.957671 6.495362,6.570058 15.768876,9.720328 24.937346,10.858088 9.16847,1.13776 18.451557,0.47916 27.689773,0.58259 3.365424,0.0377 6.762014,0.17431 10.067794,-0.45763 5.22034,-0.99792 10.00611,-3.93746 13.44868,-7.98672 3.44257,-4.049252 5.5573,-9.164796 6.22929,-14.437004 0.90117,-7.070248 -0.8198,-14.475499 -4.89729,-20.321403 -4.07748,-5.845904 -10.50249,-10.044636 -17.52644,-11.254868 -2.15506,-0.371318 -4.37586,-0.469154 -6.525399,-0.06711 -2.149537,0.402046 -4.229058,1.32377 -5.830534,2.812872 -1.351729,1.256879 -2.343199,2.918431 -2.706839,4.728039 -0.363639,1.809609 -0.07828,3.759999 0.87633,5.339756 0.606977,1.004467 1.468495,1.845532 2.454856,2.481508 0.986362,0.635975 2.095583,1.070422 3.23889,1.335419 2.286615,0.529995 4.675766,0.386323 7.002196,0.07449 2.32642,-0.311831 4.63505,-0.788997 6.97863,-0.919845 2.34359,-0.130849 4.76473,0.104665 6.8678,1.147071 1.52656,0.756654 2.84062,1.924302 3.81,3.325448 0.96938,1.401146 1.5962,3.03134 1.86151,4.714349 0.53061,3.366019 -0.40364,6.876649 -2.24788,9.74203 -1.84424,2.865381 -4.54931,5.113435 -7.54509,6.7373 -2.99578,1.623865 -6.28232,2.650605 -9.60735,3.396125 -4.213177,0.94466 -8.512459,1.45137 -12.813562,1.83051 -10.239019,0.90256 -21.034922,0.98563 -30.203389,-3.661018 -3.24205,-1.643094 -6.207633,-3.859542 -8.593677,-6.601338 -2.386043,-2.741795 -4.183301,-6.014537 -5.077542,-9.53746 -0.89424,-3.522922 -0.86947,-7.293892 0.207854,-10.765206 1.077325,-3.471314 3.222524,-6.624989 6.141331,-8.790909 3.815031,-2.830969 8.911651,-3.858439 13.525551,-2.726728 4.613901,1.131711 8.656622,4.400905 10.728687,8.675879 z"        id="line"        pathLength="1"        fill="none"        stroke="#3400dd"        stroke-width="4"    /></svg>

复制代码

接下来编写动画相关的 CSS 代码：

创建 fill-line 的动画（使用 @keyframes 和 stroke-ashoffset 属性）
将动画效果添加到 SVG 的 path 标签上，这里为 id="line"

#line {    stroke-dasharray: 1;    animation-name: fill-line;    animation-duration: 5s;}
@keyframes fill-line {    from {        stroke-dashoffset: 1;    }    to {        stroke-dashoffset: 0;    }}

复制代码

然后刷新页面，看到的效果如下：

现在，已经看到可以像处理 CSS 动画效果一样为 SVG 形状添加动画。接下来为前面创建的 SVG 图形添加动画效果，请查看动画效果。

发布于: 4 小时前阅读数: 6

原文链接:【http://xie.infoq.cn/article/f5172d32f11cd8b18f60d2b01】。

devpoint

关注

细节的追求者 2011.11.12 加入

专注前端开发，用技术创造价值！

发布

暂无评论

创作场景

CSS 轻松制作 SVG 动画

创建 SVG

创建动画

devpoint

评论