## Converting circles to arcs

Expand Messages
• 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
• ... 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.