Как разукрасить фон снаружи от path?

Question

[Илья]

Есть svg - 5 звезд. У каждой звезды есть свой контур, внутри и снаружи звезд прозрачный фон.

<svg width="68" height="12" viewBox="0 0 68 12" fill="none" xmlns="http://www.w3.org/2000/svg">
	<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
	<path d="M20 1L21.545 4.13L25 4.635L22.5 7.07L23.09 10.51L20 8.885L16.91 10.51L17.5 7.07L15 4.635L18.455 4.13L20 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
	<path d="M34 1L35.545 4.13L39 4.635L36.5 7.07L37.09 10.51L34 8.885L30.91 10.51L31.5 7.07L29 4.635L32.455 4.13L34 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
	<path d="M48 1L49.545 4.13L53 4.635L50.5 7.07L51.09 10.51L48 8.885L44.91 10.51L45.5 7.07L43 4.635L46.455 4.13L48 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
	<path d="M62 1L63.545 4.13L67 4.635L64.5 7.07L65.09 10.51L62 8.885L58.91 10.51L59.5 7.07L57 4.635L60.455 4.13L62 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Как мне сделать так, чтобы снаружи стал белый фон, а внутри так и оставался прозрачный?
Не получается ни через mask, ни через clipPath.

Answer 1

[Степан Воеводин]

Никак. Либо действительно через маски делать, либо создать еще один слой нужного цвета с вырезанными звёздами. Потому что, тут работа со слоями и если вы хотите, чтобы звёзды оставались прозрачными - значит под ними не должно быть какого-то закрашенного слоя. Вот например добавил белый слой с вырезанными из него звёздами:

<svg width="68" height="12" viewBox="0 0 68 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M68 0H0V12H68V0ZM7.545 4.13L6 1L4.455 4.13L1 4.635L3.5 7.07L2.91 10.51L6 8.885L9.09 10.51L8.5 7.07L11 4.635L7.545 4.13ZM21.545 4.13L20 1L18.455 4.13L15 4.635L17.5 7.07L16.91 10.51L20 8.885L23.09 10.51L22.5 7.07L25 4.635L21.545 4.13ZM34 1L35.545 4.13L39 4.635L36.5 7.07L37.09 10.51L34 8.885L30.91 10.51L31.5 7.07L29 4.635L32.455 4.13L34 1ZM49.545 4.13L48 1L46.455 4.13L43 4.635L45.5 7.07L44.91 10.51L48 8.885L51.09 10.51L50.5 7.07L53 4.635L49.545 4.13ZM62 1L63.545 4.13L67 4.635L64.5 7.07L65.09 10.51L62 8.885L58.91 10.51L59.5 7.07L57 4.635L60.455 4.13L62 1Z" fill="#5CC172"/>
<path d="M6 1L7.545 4.13L11 4.635L8.5 7.07L9.09 10.51L6 8.885L2.91 10.51L3.5 7.07L1 4.635L4.455 4.13L6 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M20 1L21.545 4.13L25 4.635L22.5 7.07L23.09 10.51L20 8.885L16.91 10.51L17.5 7.07L15 4.635L18.455 4.13L20 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M34 1L35.545 4.13L39 4.635L36.5 7.07L37.09 10.51L34 8.885L30.91 10.51L31.5 7.07L29 4.635L32.455 4.13L34 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M48 1L49.545 4.13L53 4.635L50.5 7.07L51.09 10.51L48 8.885L44.91 10.51L45.5 7.07L43 4.635L46.455 4.13L48 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M62 1L63.545 4.13L67 4.635L64.5 7.07L65.09 10.51L62 8.885L58.91 10.51L59.5 7.07L57 4.635L60.455 4.13L62 1Z" stroke="#F16617" stroke-linecap="round" stroke-linejoin="round"/>
</svg>

Comments

[Илья]

Да, что-то типо этого, только мне нужно 5 звезд незакрашенных. Где вы сделали это, в Inkscape? Какой мне инструмент нужен?

[Степан Воеводин]

Илья, делал в Figma. Очень неплохо работает с векторными изображениями и бесплатная версия очень с большим функционалом.
Извиняюсь, не проконтролировал экспорт svg, обновил код. Обновил код выше, теперь фон должен быть нормальный.

[Илья]

Большое спасибо!