反转 SVG 路径答案

【问题标题】：Reversing an SVG Path反转 SVG 路径
【发布时间】：2016-04-24 09:45:06
【问题描述】：

是否有反转 SVG 路径的简单方法？我怎样才能让它从左上角而不是右下角开始？

<?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>

【问题讨论】：

transform="scale(-1,-1)" 也许。不过你也需要翻译。

标签： html animation svg path adobe-illustrator

【解决方案1】：

使用Inkscape:

在Inkscape中打开这个svg文件。
选择路径
点击菜单 -> 路径 -> 反向
保存文件或在 Inkscape 中打开 xml 编辑器以查找新的路径数据。

或者使用javascript。获取并反转每个路径段。

【讨论】：

在 Sketch 中几乎一样）

【解决方案2】：

您可以使用svgpathtools。

from svgpathtools import parse_path
path = parse_path("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")

print(path.reversed().d())

【讨论】：