如何逆向操作从SVG轮廓提取开放路径?

新手上路,请多包涵

请问如何从svg轮廓(outline)中提取路径(path)?

我正在学习Adobe Illustrator等矢量图编辑软件中对矢量路径的风格化方法,希望能编写脚本,模仿并实现它们。

在Adobe Illustrator等矢量图编辑软件中,创建一个路径是容易的,在该路径的基础上使用矢量笔刷(vector brush)对该路径进行风格化也是容易的,它们是对于平面设计师来说很直观的操作。尽管矢量笔刷(vector brush)、矢量滤镜等的实现似乎并不容易,不少开源的工具也已经被开发。

作为业余字体设计师,有时,我获得的原始图形,比如一个单字字形(glyph)“一”,只包含包含用封闭的轮廓来描述的。请问我是否通过某种算法,进行上述过程的逆过程,即,从轮廓中提取路径?

我将以一个简单的、开放的矢量路径来简单说明我的问题(图1)。

图1:A Circle
图1:A Circle

<!--图1:A Circle-->
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 389 389">
  <defs>
    <style>
      .cls-1 {
        fill: none;
        stroke: #231815;
        stroke-miterlimit: 10;
      }
    </style>
  </defs>
  <path class="cls-1" d="M.5,194.5C.5,87.36,87.36,.5,194.5,.5s194,86.86,194,194-86.86,194-194,194"/>
</svg>

在Adobe Illustrator中,一种简单的,对路径进行风格化的方式是修改描边粗细——这个操作会改变路径的<style></style>属性,比如调整路径描边(stroke)的粗细(图1-2)。

图2:A bold circle
图2:A bold circle

而另一些风格化操作(如矢量笔刷)则以更加复杂的方式实现(图3)。我在Adobe Illustrator中修改了图2的笔刷为圆形,容易获得图3。在这种情况下,它似乎构造了一个封闭的矢量轮廓,而非原有的(图2)开放路径。

图3:A round-end open circle
图3:A round-end open circle

<!--图3:A round-end open circle-->
<?xml version="1.0" encoding="UTF-8"?>
<svg id="_图层_1" data-name="图层 1" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 402.92 402.89">
  <defs>
    <style>
      .cls-1 {
        fill: #231815;
      }
    </style>
  </defs>
  <path class="cls-1" d="M15,201.39c.2-57.55,27.07-112.72,72.78-147.9C134.15,17.8,196.09,5.99,252.37,21.91s100.27,56.03,121.67,108.41c22.18,54.31,17.51,117.21-12.85,167.46s-80.92,82.38-137.46,88.85c-7.38,.84-14.8,1.23-22.23,1.26-9.65,.03-9.67,15.03,0,15,62.52-.22,121.97-29.58,160.05-79.17,38.3-49.88,51.01-116.67,33.89-177.19-16.77-59.26-60.84-108.16-117.66-131.64C219.63-9.14,151.37-3.78,97.54,28.74,44.48,60.8,8.86,116.33,1.42,177.79,.47,185.62,.03,193.5,0,201.39c-.03,9.65,14.97,9.67,15,0h0Z"/>
</svg>

假设我从网上下载了图3这样的图形,请问我是否可能将其还原为图1-2这样的开放路径呢?

阅读 200
撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题
宣传栏