Рисование частей окружности круга в SVG

Question

Мне нужно нарисовать в SVG части окружности круга в разных цветах (см. Рисунок ниже). К сожалению, я не разбираюсь в SVG, поэтому нашел решение, которое, на мой взгляд, очень плохое: я использую функцию describeArc() от this post, и я рисую два пути - один красочный круг и над ним белый круг с меньшим радиусом. Например:

PATH1 = describeArc(x=10000, y=5000, radius=3000, startAngle=45, endAngle=90) 
PATH2 = describeArc(x=10000, y=5000, radius=2800, startAngle=45, endAngle=90) 

и после введения его в SVG, у меня есть:

<path d=PATH1 fill="red" stroke-width="0" /> 
<path d=PATH2 fill="white" stroke="white" stroke-width="100" /> 

Он работает, но для меня это уродливое решение. Как я могу сделать это лучше?

Answer 1

Эта функция называется describeArc(), но на самом деле рисование круговой сектор, а не дуги.

Я согласен, что это отвратительно, потому что вы излишне рисуете - и перегружаете - большую часть сектора. И вы получите проблемы с некоторыми цветами, кровоточащими по краю белого. Я предполагаю, что именно поэтому вы включаете белый удар.

Решение очень простое. Измените функцию describeArc() так, чтобы она рисовала только дугу, а не остальную часть сектора. Измените код следующим образом:

var d = [ 
    "M", start.x, start.y, 
    "A", radius, radius, 0, arcSweep, 0, end.x, end.y 
].join(" "); 

Т.е. удалите две команды пути «L», которые образуют две другие стороны сектора. Другими словами, используйте ответ @opsb, а не ответ @Ahtenus.