<?xml version="1.0"?>

<svg xmlns="http://www.w3.org/2000/svg" 
     xmlns:html="http://www.w3.org/1999/xhtml" width="800" height="800">
  
  <g transform="translate(20,20)">
    <foreignObject x="235" y="5" width="280" height="100">
      <html:h3>elliptical arcs (absolute coords)</html:h3>
    </foreignObject>
    <g transform="scale(0.6)" >
      <path d="M1,1 1198,1 1198,398 1,398z"
            style="fill:none;stroke:blue; stroke-width:1"/>
      <path d="M300,200 H150 A150,150 0 1,0 300,50 z"
            style="fill:red; stroke:blue; stroke-width:5"/>
      <path d="M275,175 V25 A150,150 0 0,0 125,175 z"
            style="fill:yellow; stroke:blue; stroke-width:5"/>      
      <path d="M600,350 L 650,325 
            A25,25  -30 0,1  700,300 L  750,275 
            A25,50  -30 0,1  800,250 L  850,225 
            A25,75  -30 0,1  900,200 L  950,175 
            A25,100 -30 0,1 1000,150 L 1050,125"
            style="fill:none; stroke:red; stroke-width:5" />
    </g>
  </g>

  <g transform="translate(20,280)">
    <foreignObject x="240" y="5" width="250" height="100">
      <html:h3>elliptical arcs (relative coords)</html:h3>
    </foreignObject>
    <g transform="scale(0.6)" >
      <path d="M1,1 1198,1 1198,398 1,398z"
            style="fill:none;stroke:blue; stroke-width:1"/>
      <path d="M300,200 h-150 a150,150 0 1,0 150,-150 z"
            style="fill:red; stroke:blue; stroke-width:5"/>
      <path d="M275,175 v-150 a150,150 0 0,0 -150,150 z"
            style="fill:yellow; stroke:blue; stroke-width:5"/>      
      <path d="M600,350 l 50,-25 
            a25,25  -30 0,1 50,-25 l 50,-25 
            a25,50  -30 0,1 50,-25 l 50,-25 
            a25,75  -30 0,1 50,-25 l 50,-25 
            a25,100 -30 0,1 50,-25 l 50,-25"
            style="fill:none; stroke:red; stroke-width:5" />
    </g>
  </g>
</svg> 
