Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Reversing an SVG Path

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>
like image 607
daveycroqet Avatar asked Jan 19 '16 03:01

daveycroqet


People also ask

How does SVG path work?

It is often placed at the end of a path node, although not always. There is no difference between the uppercase and lowercase command. The path will move to point ( 10 , 10 ) and then move horizontally 80 points to the right, then 80 points down, then 80 points to the left, and then back to the start.


1 Answers

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.

like image 138
cuixiping Avatar answered Oct 29 '22 23:10

cuixiping