Рисование частичного круга с использованием дуг SVG

Question

Я хочу нарисовать частичную дугу, используя SVG.Согласно документам , центр круга вычисляется автоматически.Но моя дуга переполняет круг.Проще продемонстрировать это с помощью рисунка:

<svg width="500px" height="500px" viewBox="0 0 100 100" style="border: navy solid 1px;"> <g transform="translate(10 10) scale(0.5 0.5)"> <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path> <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path> </g> </svg>

Вот ссылка на кодовый блок ссылка.

Answer 1

Вы можете нарисовать дуги перед синим кругом (как я рисую красный) или сделать перерисовку сегмента круга (последняя линия - я выделил зеленым, чтобы подчеркнуть, но должен быть синим).Таким образом, комбинация дуги окружности + отрезок дает лунный полумесяц в форме

 <path d="M50 50 L50 0 A1 1 0 0 1 100 50 Z" fill="red" opacity="0.7"></path>
 <path d="M0 50 A1 1 0 0 1 100 50 Z" fill="blue"></path>
 <path d="M0 50 A1 1 0 0 1 50 0 Z" fill="purple" opacity="0.7"></path>
 <path d="M50 0 A50 50 0 0 0 0 50 Z" fill="green"></path>