htmlanimationsvgpathadobe-illustrator

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>

Solution

  • 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.