Как правильно разделить путь SVG на его видимые компоненты в SED?

Question

У меня есть файл SVG со шрифтом.Я хотел бы, чтобы все отдельные буквы были на разных путях (для облегчения разбора и тому подобного).Дело в том, что все буквы находятся на одном и том же пути.

Я пытался использовать следующий скрипт SED:

#!/bin/sed -f

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

(рассматриваемый SVG начинается и заканчивается, онтакие пути, поэтому я не думаю, что это должно быть проблемой.)

Однако, это приводит к заполнению большого количества областей, которые не были заполнены в оригинале.Я думал M означало переехать в определенное место.

Что я делаю не так?Это слишком большая проблема для SED?

РЕДАКТИРОВАТЬ:

ссылка на мой код и SVG-ы: https://gitlab.com/smeagolthellama/glyphgenerator/tree/master

SVG в fonts/.Базовый файл black_path1.svg, результат black_path1_seperated.svg (извините за опечатку, исправлю).

Answer 1

Представьте букву А: после рисования внешней части вам нужно «обрезать» средний треугольник.Для этого вам может понадобиться переместиться в другую точку и нарисовать треугольник в противоположном направлении.Вы делаете это с помощью команды M или m.Если вы разделите путь на М, вы получите два пути: внешность А и маленький треугольник заполнены.Возможно, вам придется отредактировать SVG вручную.

Вот как я это сделал: я открыл ваш SVG в Illustrator, я сгруппировал пути для каждой буквы, затем я соединил пути для одной буквы водин путь.

Это, например, буква 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>

Пожалуйста, смотрите полный SVG в codepen