[CSS] svg路径动画

Posted

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了[CSS] svg路径动画相关的知识,希望对你有一定的参考价值。

参考技术A

在制作CSS动画的时候,经常会有这样的需求,
让一个方块 沿着给定的路径 运动。

如果运动路径是不规则的,通过设置 top , left 的属性值,就显得非常困难了。
这时候可以借助svg来实现。

path 元素的形状是通过它的 d 属性 定义的,
d 属性的值,是一个“命令+参数”的序列。

其中, M 20 30 L 160 180 ,包含了2个命令序列,
M 20 30 ,表示将画笔移动到坐标 20,30 处,
L 160 180 ,表示从画笔当前位置,到 160,180 位置画直线。

path元素支持多种命令,可以参考这里, curve commands

html元素的CSS样式属性 offset-path ,表示 偏移路径
通过指定 offset-path 的值为path元素的 d 属性值,我们可以实现元素沿着给定的 path 路径运动。

其中, offset-distance 指定了元素偏移初始位置的百分比。

通过在 @keyframes 中逐帧更改 offset-distance ,可以实现动画效果。

我们修改path的 d 属性为 M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80 ,
相应的也修改小方块的 offset-path 属性。

就可以实现小方块沿着path运动的效果了。

MDN: paths
MDN: offset-path
MDN: offset-distance
A How-to Guide to SVG Animation
Scalable Vector Graphics (SVG) 2 - Chapter 9: Paths

使用 css 动画 svg 路径填充

【中文标题】使用 css 动画 svg 路径填充【英文标题】:Animate svg path fill using css 【发布时间】:2013-01-23 06:22:40 【问题描述】:

可以使用 css 更改 svg 填充。但我没有设法创建动画。 这是我的 svg 对象:

<svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
<rect id="fill" x="21" y="26"  />
</svg>

并且,使用 SASS:

@include keyframes(loading)
  0%
    fill: black
  50%
    fill: white
  100%
    fill: black
#fill
  fill: white
  @include animation(loading 3s infinite)

我做错了什么?

【问题讨论】:

【参考方案1】:

编辑

好的,看起来像这样的东西应该可以工作。

    <svg version="1.1" id="tick" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"   viewBox="0 0 60 60" enable-background="new 0 0 60 60" xml:space="preserve"> 
  <style type="text/css" >
        <![CDATA[

          @keyframes fill 
              0% 
                  fill: black;
              
              50% 
                  fill: white;
              
              100% 
                  fill: black;
              
          

          #fill 
              fill: black;
              animation-name: fill;
              animation-duration: 3s;
              animation-iteration-count: infinite;
          

        ]]>
    </style>
    <rect id="fill" x="21" y="26"  />
</svg>

示例如下:http://jsbin.com/ayiheb/2/edit

【讨论】:

谢谢 =) 但我需要为特定形状设置动画#fill。 @evergreenv 好吧。是否有理由需要在 CSS 中完成而不是在 SVG 中使用动画标签? @evergreenv 顺便说一句,用应该有效的东西更新了答案。告诉我! 我希望能够使用类触发动画,并且不想使用动画创建额外的 svg。或者可以使用 display:none; 关闭动画?而且看起来 Chrome 不支持这种带有外部 css 的动画。

以上是关于[CSS] svg路径动画的主要内容,如果未能解决你的问题,请参考以下文章

css 过渡动画不适用于 svg 路径的“d”属性更改

css 笔记:CSS与SVG实现元素沿环形路径动画 - 4

css 笔记:CSS与SVG实现元素沿环形路径动画 - 2

css怎么做曲线路径动画

html 笔记:CSS与SVG实现元素沿环形路径动画 - 3

html 笔记:CSS与SVG实现元素沿环形路径动画 - 1