相关疑难解决方法(0)

如何反转<mpath>上SVG动画的移动方向?

http://codepen.io/KeliChiu/pen/gabNWM 嗨,我正在尝试反转SMIL SVG动画中沿路径的两个红点的移动方向。对于我从文档中获得的所有属性,我找不到适合此尝试的属性。帮助表示赞赏!此处的文档:http : //www.w3.org/TR/SVG/animate.html#AnimateMotionElement

<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="320px"
         height="320px" viewBox="0 0 320 320" enable-background="new 0 0 320 320" xml:space="preserve">

                <path class="stage1" id="stage1-1" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                M160,220.499c-11.284,0-20.432-9.147-20.432-20.432v-40.868"/>

                <path class="stage1" id="stage1-2" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="
                M180.432,159.199v40.868c0,11.284-9.147,20.432-20.432,20.432"/>

  <circle  r="8" fill="red">
  <animateMotion dur=".6s" begin=".4s" fill="remove" rotate="auto" >
       <mpath xlink:href="#stage1-1"/>
    </animateMotion>
</circle>
<circle r="8" fill="red">
  <animateMotion dur=".6s" begin="s" fill="remove" rotate="auto">
       <mpath xlink:href="#stage1-2"/>
    </animateMotion>
</circle>
    </svg>
Run Code Online (Sandbox Code Playgroud)

animation svg smil

2
推荐指数
1
解决办法
3856
查看次数

标签 统计

animation ×1

smil ×1

svg ×1