Question

我有一个带有字体的SVG文件。我希望所有单个字母都位于单独的路径上（以便于解析和类似的操作）。问题是，所有字母都在同一条路径上。

我尝试使用以下SED脚本：

#!/bin/sed -f

s/ M/\"\/\>\n\<path d=\"M/g

（有问题的SVG的起点和终点都是这样，所以我认为这不是问题。）

但是，这导致很多区域被填充，而原始区域没有填充这些区域。我以为M意味着要搬到一个特定的地方。

我在做什么错？对于SED来说，这个问题太大了吗？

编辑：

链接到我的代码和SVG-s： https://gitlab.com/smeagolthellama/glyphgenerator/tree/master

SVG位于fonts/中。基本文件为black_path1.svg，结果为black_path1_seperated.svg（很抱歉，拼写错误将得到解决）。

Answer 1

想象一下字母A：绘制外部零件后，您需要“切除”中间三角形。为此，您可能需要移动到另一个点并沿相反方向绘制三角形。您可以使用M或m命令执行此操作。如果将路径除以M，您将获得两条路径：A的外部和填充的小三角形。您可能需要手动编辑SVG。

这是我的工作方式：我在Illustrator中打开了SVG，将每个字母的路径归为一组，然后我将同一字母的路径合并为一个路径。

例如，这是字母b：

svg{width:45%;border:1px solid}

<svg  viewBox="355 32.006 5 5">
<g id="_b">
	<path d="M357.427,34.199c0.018,0,0.035,0,0.052,0.002c0.242,0.018,0.433,0.139,0.572,0.363c0.121,0.197,0.182,0.431,0.182,0.7
		c0,0.278-0.099,0.539-0.296,0.781c-0.197,0.242-0.413,0.375-0.646,0.397c-0.043,0.004-0.086,0.006-0.128,0.006
		c-0.227,0-0.442-0.06-0.646-0.181c0.018-0.839,0.029-1.414,0.034-1.723c0.144-0.121,0.312-0.213,0.504-0.276
		C357.197,34.222,357.321,34.199,357.427,34.199z"/>
	<path d="M356.604,32.006l-0.559,0.054l0.006,0.572l-0.182,0.014l0.014,0.135l0.175-0.014c0.004,0.108,0.004,0.182,0,0.222
		l-0.188,0.014l0.014,0.134l0.182-0.013l0.047,3.608l0.397-0.027v-0.162c0.184,0.126,0.435,0.195,0.754,0.209
		c0.015,0,0.03,0,0.045,0c0.337,0,0.649-0.144,0.938-0.432c0.296-0.3,0.444-0.657,0.444-1.07c0-0.413-0.104-0.747-0.31-1.003
		c-0.202-0.256-0.458-0.39-0.767-0.404c-0.021-0.001-0.042-0.001-0.062-0.001c-0.37,0-0.699,0.115-0.988,0.344l0.02-1.111
		l0.424-0.034l-0.014-0.134l-0.411,0.034l0.007-0.216l0.404-0.027l-0.013-0.134l-0.391,0.027L356.604,32.006z"/>
	<path d="M357.29,35.055c-0.059,0-0.11,0.022-0.155,0.067c-0.045,0.041-0.067,0.092-0.067,0.155c0,0.059,0.022,0.11,0.067,0.155
		c0.045,0.044,0.096,0.067,0.155,0.067c0.063,0,0.117-0.022,0.162-0.067c0.041-0.045,0.061-0.097,0.061-0.155
		c0-0.062-0.022-0.117-0.067-0.161C357.404,35.076,357.353,35.055,357.29,35.055z"/>
</g>
</svg>

<svg  viewBox="355 32.006 5 5">
<g id="b">
	<path d="M357.427,34.199c0.018,0,0.035,0,0.052,0.002c0.242,0.018,0.433,0.139,0.572,0.363c0.121,0.197,0.182,0.431,0.182,0.7
		c0,0.278-0.099,0.539-0.296,0.781c-0.197,0.242-0.413,0.375-0.646,0.397c-0.043,0.004-0.086,0.006-0.128,0.006
		c-0.227,0-0.442-0.06-0.646-0.181c0.018-0.839,0.029-1.414,0.034-1.723c0.144-0.121,0.312-0.213,0.504-0.276
		C357.197,34.222,357.321,34.199,357.427,34.199z
	  
    M356.604,32.006l-0.559,0.054l0.006,0.572l-0.182,0.014l0.014,0.135l0.175-0.014c0.004,0.108,0.004,0.182,0,0.222
		l-0.188,0.014l0.014,0.134l0.182-0.013l0.047,3.608l0.397-0.027v-0.162c0.184,0.126,0.435,0.195,0.754,0.209
		c0.015,0,0.03,0,0.045,0c0.337,0,0.649-0.144,0.938-0.432c0.296-0.3,0.444-0.657,0.444-1.07c0-0.413-0.104-0.747-0.31-1.003
		c-0.202-0.256-0.458-0.39-0.767-0.404c-0.021-0.001-0.042-0.001-0.062-0.001c-0.37,0-0.699,0.115-0.988,0.344l0.02-1.111
		l0.424-0.034l-0.014-0.134l-0.411,0.034l0.007-0.216l0.404-0.027l-0.013-0.134l-0.391,0.027L356.604,32.006z
	
    M357.29,35.055c-0.059,0-0.11,0.022-0.155,0.067c-0.045,0.041-0.067,0.092-0.067,0.155c0,0.059,0.022,0.11,0.067,0.155
		c0.045,0.044,0.096,0.067,0.155,0.067c0.063,0,0.117-0.022,0.162-0.067c0.041-0.045,0.061-0.097,0.061-0.155
		c0-0.062-0.022-0.117-0.067-0.161C357.404,35.076,357.353,35.055,357.29,35.055z"/>
</g>
</svg>

请在codepen中查看完整的SVG

在SED中将SVG路径分离为其可见组件的正确方法是什么？

1 个答案: