SVG 动画初接触

Jun 17, 2016 ·

2 分钟阅读

初入 SVG 动画坑，小记录如下：

g=group，群组标签；
g 标签的动画不同于 rect 和 c 的属性动画，没有 xy 位置属性，属于 transform 动画，transform包括坐标的变换和缩放；
SVG 图形由颜色属性和形状属性组成；
path 并没有 xy 位置属性，相同形状不同位置的图形标记为不同的 path；
通用属性与独有属性；
Windows 下不同浏览器对svg动画的兼容性不同，Firefox最好（两种动画都能显示），Chrome 次之（只显示透明度动画），IE 最差（不显示动画，IE8 及以下不支持 SVG 图形的显示）；
OSX 下 Chrome，Firefox，Safari 均完美支持 SVG 动画；
SVG 动画可以有效的解决 gif 锯齿严重的问题，但是 Chrome 表示很快也将不支持 SVG 动画了，需要的请用 CSS 来编写：
本次 SVG 代码如下：

<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 19.2.1, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
<svg version="1.1" id="图层_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
   viewBox="0 0 140.7 134" style="enable-background:new 0 0 140.7 134;" xml:space="preserve">
<style type="text/css">
  .st0{fill:url(#SVGID_1_);}
</style>
<g transform="translate(0,0)">

    <linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="94.138" y1="-318.8234" x2="125.0649" y2="-349.7503" gradientTransform="matrix(1 0 0 -1 0 -232)">
    <stop  offset="0" style="stop-color:#FFFFFF"/>
    <stop  offset="1" style="stop-color:#FFF0C9"/>
  </linearGradient>
  <path class="st0" d="M122.3,97.3l-1.1-3.1c-0.4-1-1.5-1.7-2.5-1.4c-1.2,0.3-1.9,1.6-1.5,2.7l1,3h-0.4l-2.8-7.8
    c-0.4-1-1.5-1.7-2.5-1.4c-1.2,0.3-1.9,1.6-1.5,2.7l2.7,8.2h-0.3l-3.9-9.8c-0.4-1-1.5-1.7-2.5-1.4c-1.2,0.3-1.9,1.6-1.5,2.7l3.3,9.2
    l-0.4,0.2l-6.8-17.6c-0.4-1-1.5-1.7-2.5-1.4c-1.2,0.3-1.9,1.6-1.5,2.7l7.6,21.2l0,0l0.5,1.6c0.6,1.2,0.2,2.6-1.4,1.7
    c-1.2-0.6-2.3-2.5-3.3-4.2l-2.3-3.3c-0.6-1-2-1.3-3-0.6c-0.9,0.7-1,1.9-0.5,2.8c0,0,4.1,6.7,5.6,8.9c4.7,6.8,12.5,10.3,16.1,8.6
    l4-1.4c4.6-1.6,7.2-6.2,5.4-11.2L122.3,97.3L122.3,97.3z"/>

    <animate id="a1" accumulate="none" additive="replace" arrributeid="a1" attributeName="fill-opacity" attributeType="CSS" begin="0s" calcMode="linear" dur="2s" fill="remove" repeatCount="indefinite" restart="always" values="0;1">
    </animate>

    <animateTransform  Type="translate" accumulate="none" additive="replace" attributeName="transform" begin="0s" by="-20 -50" calcMode="linear"  dur="2s" fill="remove" repeatCount="indefinite" restart="always" type="translate">
    </animateTransform>
</g>

</svg>

编辑于 Nov 19, 2024