SVG construction example 1


	links to this page:

Last updated at 3:25 pm UTC on 21 October 2020

Smalltalk script

"define block which returns svg code string for a circle given x and y position and radius and string value for fill color"
circle := [:cx :cy :r :fill| '<circle '
                              ,'cx="', cx printString, '" cy="', cy printString
                              , '" r="', r printString, 
                              '" fill="', fill, 
                              '" />'].

Transcript clear.
Transcript show: '<html><svg>';cr.
1 to: 5 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'green'); cr].
Transcript show: '</svg></html>';cr.

Result on Transcript

<html><svg>
<circle cx="50" cy="50" r="20" fill="green" />
<circle cx="100" cy="50" r="20" fill="green" />
<circle cx="150" cy="50" r="20" fill="green" />
<circle cx="200" cy="50" r="20" fill="green" />
<circle cx="250" cy="50" r="20" fill="green" />
</svg></html>

The result embedded in this wiki page

The default viewport does not allow a sixth circle to be shown fully.

<html><svg>
<circle cx="50" cy="50" r="20" fill="green" />
<circle cx="100" cy="50" r="20" fill="green" />
<circle cx="150" cy="50" r="20" fill="green" />
<circle cx="200" cy="50" r="20" fill="green" />
<circle cx="250" cy="50" r="20" fill="green" />
<circle cx="300" cy="50" r="20" fill="red" />
</svg></html>

So continue reading with SVG construction example 1 with viewport set.