| << Chapter < Page | Chapter >> Page > |
SVG code to draw a circle
Listing 15 shows the SVG code produced by the Java code in Listing 14 .
| Listing 15 . SVG code to draw a circle. |
|---|
<circle fill="none" stroke="black" stroke-width="1"
cx="725" cy="355" r="41"><title>circle</title></circle> |
By now, you should see the pattern and there should be no need to explain the relationship between the attributes of the circle element and the parametervalues in the call to the makeCircle method in Listing 14 .
The earlier section titled What does the image show describes how three cords are used to tie the masses to one another and to tie the leftmost mass to the wall. This is accomplished using the fourcalls to the Java makeLine method shown in Listing 16 .
| Listing 16 . Draw more lines. |
|---|
//Draw cord from wall to Mass C
Element cordR = SvgLib21.makeLine(svg,ns,
"line",1.0,
5.0,2,
5.0);
//Draw cord from Mass C to Mass BElement cordQ = SvgLib21.makeLine(svg,
ns,"line",
4.0,5.0,
5.0,5.0
);//Draw cord from Mass B to the top of the pulley.
Element cordP1 = SvgLib21.makeLine(svg,ns,
"line",7.0,
5.0,8.05,
5.0);
//Draw the cord from the right side of the pulley to// Mass A
Element cordP2 = SvgLib21.makeLine(svg,ns,"line",
8.5,4.5,
8.5,2.5
); |
There is nothing new in Listing 16 .
SVG code to draw more lines
The Java code in Listing 16 produces the SVG code shown in Listing 17 .
| Listing 17 . SVG code to draw more lines. |
|---|
<line stroke="black" stroke-width="1"
x1="90" y1="315" x2="180" y2="315"><title>line</title></line><line stroke="black" stroke-width="1"
x1="360" y1="315" x2="450" y2="315"><title>line</title></line><line stroke="black" stroke-width="1"
x1="630" y1="315" x2="725" y2="315"><title>line</title></line><line stroke="black" stroke-width="1"
x1="765" y1="360" x2="765" y2="540"><title>line</title></line> |
There is also nothing new in Listing 17 .
With the exception of text to be discussed shortly, we have now created an element for every object that we need in our drawing.
As you may have noticed, the value of the stroke-width attribute for every element created so far has been "1". That is the defaultvalue. We may not be satisfied with that default value in all cases. We may prefer that some of the lines that describe the geometrical objects be thicker than linesthat describe other geometrical objects.
My SVG graphics library provides a method named setStrokeWidth that we can use to adjust the stroke-width attribute values for an elementbefore the final output SVG file is written. (As you will see if you examine Listing 27 , the library provides methods that let you adjust other attribute values as well.)
Notification Switch
Would you like to follow the 'Accessible physics concepts for blind students' conversation and receive update notifications?
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|