Reversing an SVG Path

html animation svg path adobe-illustrator
daveycroqet picture daveycroqet · Jan 19, 2016 · Viewed 11.6k times · Source

Is there a simple method for reversing an SVG path? How can I make this start at the top left, rather than the bottom right?

<?xml version="1.0" encoding="utf-8"?>
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="548.9px" height="620px" viewBox="0 0 548.9 620" xml:space="preserve">
    <path d="M305.3,461.7c-13.6,2.2-66,1.3-99.6-21.9c-77.4-53.3-42.5-147.1-95.4-204.1c-42.2-45.6-98-59.2-60-131.7"/>
</svg>

Answer

cuixiping picture cuixiping · Jan 19, 2016

Use Inkscape:

  1. Open this svg file in Inkscape.
  2. select the path
  3. click Menu -> Path -> Reverse
  4. save the file or open the xml editor in Inkscape to find the new path data.

Or use javascript. get and reverse each path segment.

Related questions

jQuery animated number counter from zero to value

I have created a script to animate a number from zero to it's value. Working jQuery Not Working I now want to run the script several times on the page for each matching class. Below is what I am trying …

Read More
Slide down div on click Pure CSS?

I found this post How to create sliding DIV on click? But all the answers are Jquery methods. Is there any way to create this with PURE CSS? I have a couple other things in mind as well... What can …

Read More
How do I re-trigger a WebKit CSS animation via JavaScript?

So, I've got this -webkit-animation rule: @-webkit-keyframes shake { 0% { left: 0; } 25% { left: 12px; } 50% { left: 0; } 75% { left: -12px; } 100% { left:0; } } And some CSS defining some of the animation rules on my box: #box{ -webkit-animation-duration: .02s; -webkit-animation-iteration-count: 10; -webkit-animation-timing-function: linear; } I can shake the #box like …

Read More