arcs02.svg 2.3 KB

1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859
  1. <?xml version="1.0" standalone="no"?>
  2. <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
  3. "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
  4. <svg width="12cm" height="5.25cm" viewBox="0 0 1200 525" version="1.1"
  5. xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  6. <title>Example arcs02 - arc options in paths</title>
  7. <desc>Pictures showing the result of setting
  8. large-arc-flag and sweep-flag to the four
  9. possible combinations of 0 and 1.</desc>
  10. <g font-family="Verdana" >
  11. <defs>
  12. <g id="baseEllipses" font-size="20" >
  13. <ellipse cx="125" cy="125" rx="100" ry="50"
  14. fill="none" stroke="#888888" stroke-width="2" />
  15. <ellipse cx="225" cy="75" rx="100" ry="50"
  16. fill="none" stroke="#888888" stroke-width="2" />
  17. <text x="35" y="70">Arc start</text>
  18. <text x="225" y="145">Arc end</text>
  19. </g>
  20. </defs>
  21. <rect x="1" y="1" width="1198" height="523"
  22. fill="none" stroke="blue" stroke-width="1" />
  23. <g font-size="30" >
  24. <g transform="translate(0,0)">
  25. <use xlink:href="#baseEllipses"/>
  26. </g>
  27. <g transform="translate(400,0)">
  28. <text x="50" y="210">large-arc-flag=0</text>
  29. <text x="50" y="250">sweep-flag=0</text>
  30. <use xlink:href="#baseEllipses"/>
  31. <path d="M 125,75 a100,50 0 0,0 100,50"
  32. fill="none" stroke="red" stroke-width="6" />
  33. </g>
  34. <g transform="translate(800,0)">
  35. <text x="50" y="210">large-arc-flag=0</text>
  36. <text x="50" y="250">sweep-flag=1</text>
  37. <use xlink:href="#baseEllipses"/>
  38. <path d="M 125,75 a100,50 0 0,1 100,50"
  39. fill="none" stroke="red" stroke-width="6" />
  40. </g>
  41. <g transform="translate(400,250)">
  42. <text x="50" y="210">large-arc-flag=1</text>
  43. <text x="50" y="250">sweep-flag=0</text>
  44. <use xlink:href="#baseEllipses"/>
  45. <path d="M 125,75 a100,50 0 1,0 100,50"
  46. fill="none" stroke="red" stroke-width="6" />
  47. </g>
  48. <g transform="translate(800,250)">
  49. <text x="50" y="210">large-arc-flag=1</text>
  50. <text x="50" y="250">sweep-flag=1</text>
  51. <use xlink:href="#baseEllipses"/>
  52. <path d="M 125,75 a100,50 0 1,1 100,50"
  53. fill="none" stroke="red" stroke-width="6" />
  54. </g>
  55. </g>
  56. </g>
  57. </svg>