Loading ...
Sorry, an error occurred while loading the content.
 

Converting circles to arcs

Expand Messages
  • Pranav Lal
    Hi all, I was creating some accessible diagrams. I had a math teacher give me instructions for a simple mathematical diagram. She chose locating root 2 on a
    Message 1 of 2 , Nov 3, 2012
      Hi all,

      I was creating some accessible diagrams. I had a math teacher give me
      instructions for a simple mathematical diagram. She chose locating root 2 on
      "a number line". I was able to create the diagram but had a problem. How do
      I draw an arc in SVG? Do I need to use the path element? The teachers
      instructions and My code are below.

      [start of instructions]

      To locate square root 2 on the number line
      Steps
      1. Draw the x-axis.
      2. Take 0 as point A.
      3. Take a point at a unit distance on the right of 0 on the x-axis.
      Name the point as B
      4. At B draw a perpendicular.
      5. with B as centre and a radius of lenght of one unit draw an arc on
      the perpendicular. Name the point as C.
      6. Measure lenght AC.
      7. With A as centre and radius equal to lenght AC draw an arc on the
      x-axis to the right of 0. Mark the point as D.
      8. Point D represents square root 2 on the number line.
      [end of instructions]

      [start of code]
      <?xml version="1.0" encoding="UTF-8"?>
      <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
      "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

      <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="8.5in"
      height="11.0in" id="svg1351742905194" viewBox="0.0 0.0 850.0 1100.0">
      <title>Measuring root 2</title>
      <desc>a demonstration of how root 2 can be drawn</desc>
      <line stroke="black" stroke-width="5.0" x1="0.0" y1="400.0" x2="900.0"
      y2="400.0" id="line1351743001798" stroke-opacity="1.0">
      <title>x axis</title>
      <desc>the x axis line which is the base line for this diagram</desc>
      </line>
      <text fill="black" stroke="black" x="0.0" y="405.0" font-size="36"
      font-family="Arial" id="text1351743461948" font-style="normal"
      font-weight="normal">
      A
      <title>A</title>
      <desc>point a</desc>
      </text>
      <text fill="black" stroke="black" x="500.0" y="405.0" font-size="36"
      font-family="Arial" id="text1351743506531" font-style="normal"
      font-weight="normal">
      B
      <title>B</title>
      <desc>point B</desc>
      </text>
      <line stroke="black" stroke-width="4.0" x1="400.0" y1="400.0" x2="400.0"
      y2="-200.0" id="line1351743660469" stroke-opacity="1.0">
      <title>perpendicularfromPointB</title>
      <desc>a perpendicular line from line B going up</desc>
      </line>
      <circle fill="none" stroke="black" stroke-width="5.0" cx="400.0" cy="400.0"
      r="200"> <title>arcBC</title>
      <desc>an arc on the perpendicular</desc>
      </circle>
      <text fill="black" stroke="black" x="400.0" y="-200.0" font-size="36"
      font-family="Arial" id="text1351743905859" font-style="normal"
      font-weight="normal">
      C
      <title>pointC</title>
      <desc>point C on top of arc</desc>
      </text>
      <circle fill="none" stroke="black" stroke-width="5.0" cx="0" cy="0"
      r="223.6068">
      <title>arcAC</title>
      <desc>arc ac</desc>
      </circle>
      <text fill="black" stroke="black" x="200.0" y="200.0" font-size="36"
      font-family="Arial" id="text1351744045515" font-style="normal"
      font-weight="normal">
      D
      <title>pointD</title>
      <desc>point D or root 2</desc>
      </text>
      </svg>
      [end of code]
      Pranav
    • Robert Longson
      ... That s right, an arc is drawn as a path. There s some examples here: http://www.svgbasics.com/arcs.html Robert
      Message 2 of 2 , Nov 4, 2012
        > I was creating some accessible diagrams. I had a math teacher give me
        > instructions for a simple mathematical diagram. She chose locating root 2 on
        > "a number line". I was able to create the diagram but had a problem. How do
        > I draw an arc in SVG? Do I need to use the path element? The teachers
        > instructions and My code are below.
        >

        That's right, an arc is drawn as a path. There's some examples here: http://www.svgbasics.com/arcs.html

        Robert
      Your message has been successfully submitted and would be delivered to recipients shortly.