How to decorate background outside of path?

I

Ilya2021-12-08 12:49:32

SVG

Ilya, 2021-12-08 12:49:32

There is svg - 5 stars. Each star has its own contour, inside and outside the stars there is a transparent background.

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

How do I make the background white on the outside and transparent on the inside?
It does not work either through mask or through clipPath.

Reply

Answer the question

In order to leave comments, you need to log in

1 answer(s)

S

Stepan Voevodin, 2021-12-08
@ravewave

No way. Either do it really through masks, or create another layer of the desired color with cut out stars. Because, this is working with layers, and if you want the stars to remain transparent, then there should not be some kind of filled layer under them. For example, I added a white layer with stars cut out of it:

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