Browse Groups

• 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
View Source
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
View Source
> 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.
• Changes have not been saved
Press OK to abandon changes or Cancel to continue editing
• Your browser is not supported
Kindly note that Groups does not support 7.0 or earlier versions of Internet Explorer. We recommend upgrading to the latest Internet Explorer, Google Chrome, or Firefox. If you are using IE 9 or later, make sure you turn off Compatibility View.