Twice-interrupted circular path in SVG -


i want create circular path multiple "holes" in it, preferably without using masks , like.

currently, i've got this:

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewbox="0 0 400 400">     <path d="m 100 100 90 90 0 1 0 200 100 m 110 90 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" /> </svg> 

as can see, relies on manually moving start of new arc, results in arc being off.

i'd rather not have lot of math position move just right, there sort of "arc move" can use?

if not, how math work (i'm rusty in geometry stuff)

the simplest way achieve want use dash array.

<svg xmlns="http://www.w3.org/2000/svg" width="600" height="600" viewbox="0 0 400 400">      <path d="m 100 100 90 90 0 1 0 200 100 m 110 90 90 90 0 0 1 190 90" stroke="#424242" stroke-width="5" fill="transparent" />      <path d="m 60 175 90 90 0 0 1 240 175 90 90 0 0 1 60 175" stroke="red" stroke-width="5" fill="transparent" stroke-dasharray="88 14 78 14 372"/></svg>


Comments

Popular posts from this blog

java - HTTP Status 500 - An exception occurred processing JSP page /second.jsp at line 15 -

SQL Server - MyCTE query based on 24 hour period (next day) -

php - Using str_replace to translate a MySQL Table in html -