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>
© 20072025 XoaX.net LLC. All rights reserved.