SVG HTML

Arc Paths: Large and Left Flags

This SVG example demonstrates how to use the large and left flags for an arc path.

ArcLargeAndLeftFlags.svg

<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>
 

Output

0 0 0 1 1 0 1 1
 
 

© 2007–2024 XoaX.net LLC. All rights reserved.