svg storke-dashoffest makes anti clockwise animation

问题

I tried to draw a svg circle. As i need to animate it using stroke-dashoffest the circle's stroke fills only in anti-clockwise direction. Is there any way to move the animation in clock wise direction.

My Code:

 <svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <!-- Created with Method Draw - http://github.com/duopixel/Method-Draw/ -->


 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

回答1:

Just flip the svg. [edit] you can use the inline transform to flip just the path:

<svg id="this_svg" width="130" height="130" xmlns="http://www.w3.org/2000/svg">
    <g>
        <title>Layer 1</title>
    <g>
    <path transform= "translate(130),scale(-1,1)" stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
      <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1">     
      </animate>
    </path>
    </g>

</svg>

回答2:

To reverse the direction of a dashoffset animation, you don't need to reverse the path. All you generally need to do is reverse the direction that the dash offset values change.

Normally that means making the non-zero number negative. So, in your example, your dash offset goes from 2000 to 0. Change it to go from -2000 to 0.

In fact for your circle, 2000 is way too large a value for your dash pattern. For your circle shape, the circumference is actually around 333.

See below:

<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75a54,52 0 1 0 0.00001,0l-0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="-333" stroke-dasharray="333" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="-333" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

回答3:

So I read up a little on SVG path, and especially the arc a.

An arc has the large-arc-flag and sweep-flag to control how it is drawn.

The one you use has the 1,0 arc but you should use the 1,1, here done in below sample. Also the end point needed an adjustment, to -0.00001,0.

As the a is quite complicated to explain, here is two links with some reading:

http://tutorials.jenkov.com/svg/path-element.html#arcs
https://css-tricks.com/svg-path-syntax-illustrated-guide/

<svg width="130" height="130" xmlns="http://www.w3.org/2000/svg">
 <g>
  <title>Layer 1</title>
  <g>
  <path stroke="blue" id="svg_1" d="m66.75,11.75 a54,52 0 1 1 -0.00001,0z" opacity="0.5" stroke-width="5" stroke-dashoffset="2000" stroke-dasharray="2000" fill="red">
    <animate id="project_study_anim1" attributeName="stroke-dashoffset" from="2000" to="0" begin="1s" dur="5s" fill="freeze" repeatCount="1"></animate>
  </path>
  </g>
 </g>
</svg>

来源：https://stackoverflow.com/questions/43583759/svg-storke-dashoffest-makes-anti-clockwise-animation

标签

html

css

css3

svg

svg-animate