Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Welcome To Ask or Share your Answers For Others

Categories

0 votes
319 views
in Technique[技术] by (71.8m points)

css - SVG half of a circle

How can I rotate the circle 180 degrees in the SVG, not with CSS? I mean only having the top of the SVG not the bottom.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome To Ask or Share your Answers For Others

1 Answer

0 votes
by (71.8m points)

The third 0 (fifth parameter) to the a (arc) command is the "sweep flag". Change it from a 0 (anti-clockwise) to a 1 (clockwise). It will then go the other direction, around the circle, from the start to the end point.

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

与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…
Welcome to OStack Knowledge Sharing Community for programmer and developer-Open, Learning and Share
Click Here to Ask a Question

...