SVG половина круга

#css #svg

#css #svg

Вопрос:

Как я могу повернуть круг на 180 градусов в SVG, а не с помощью CSS? Я имею в виду только верхнюю часть SVG, а не нижнюю.

 <svg width="135" height="135">
    <path d="M10,80 a60,60 0 0,0 115,0" fill="#f7ad1a" />
</svg> 

Ответ №1:

Третьим 0 (пятым параметром) команды a (arc) является «флаг развертки». Измените его с a 0 (против часовой стрелки) на a 1 (по часовой стрелке). Затем он пойдет в другом направлении, по кругу, от начальной до конечной точки.

 <svg width="135" height="135">
    <path d="M10,80 a60,60 0 0,1 115,0" fill="#f7ad1a" />
</svg>