This SVG example demonstrates how to use the large and left flags for an arc path.
<svg width="550px" height="450px" xmlns="http://www.w3.org/2000/svg"> <g transform="translate(100,50)"> <path d="M 0 0 A 100 100 0 0 0 100 100" fill="none" stroke="black" stroke-width="1"/> <g fill="#00FF00" stroke="#00FF00"> <line x1="0" y1="0" x2="90" y2="90" stroke-width="3" /> <polygon points="100,100 95,85 90,90 85,95" stroke-width="0" /> </g> <text x="10" y="100" fill="black">0 0</text> </g> <g transform="translate(350,50)"> <path d="M 0 0 A 100 100 0 0 1 100 100" fill="none" stroke="black" stroke-width="1"/> <g fill="#00FF00" stroke="#00FF00"> <line x1="0" y1="0" x2="90" y2="90" stroke-width="3" /> <polygon points="100,100 95,85 90,90 85,95" stroke-width="0" /> </g> <text x="60" y="0" fill="black">0 1</text> </g> <g transform="translate(150,200)"> <path d="M 0 0 A 100 100 0 1 0 100 100" fill="none" stroke="black" stroke-width="1"/> <g fill="#00FF00" stroke="#00FF00"> <line x1="0" y1="0" x2="90" y2="90" stroke-width="3" /> <polygon points="100,100 95,85 90,90 85,95" stroke-width="0" /> </g> <text x="-10" y="225" fill="black">1 0</text> </g> <g transform="translate(300,300)"> <path d="M 0 0 A 100 100 0 1 1 100 100" fill="none" stroke="black" stroke-width="1"/> <g fill="#00FF00" stroke="#00FF00"> <line x1="0" y1="0" x2="90" y2="90" stroke-width="3" /> <polygon points="100,100 95,85 90,90 85,95" stroke-width="0" /> </g> <text x="90" y="-70" fill="black">1 1</text> </g> </svg>
© 20072024 XoaX.net LLC. All rights reserved.