Squeak
  links to this page:    
View this PageEdit this PageUploads to this PageHistory of this PageTop of the SwikiRecent ChangesSearch the SwikiHelp Guide
SVG construction example 1 with viewport and viewbox set
Last updated at 12:13 am UTC on 8 November 2020
The viewbox has the same values as the viewport (width, height).
circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript clear.
Transcript show: '<html><svg width="700" height="100" viewbox="0 0 700 100">';cr.
1 to: 10 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'green'); cr].
Transcript show: '</svg></html>';cr.

<svg width="700" height="100" viewbox="0 0 700 100">
<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="green" />
<circle cx="350" cy="50" r="20" fill="green" />
<circle cx="400" cy="50" r="20" fill="green" />
<circle cx="450" cy="50" r="20" fill="green" />
<circle cx="500" cy="50" r="20" fill="green" />
</svg>




Values for viewbox are doubled:

circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript clear.
Transcript show: '<html><svg width="700" height="100" viewbox="0 0 1400 200">';cr.
1 to: 10 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'red'); cr].
Transcript show: '</svg></html>';cr.


<svg width="700" height="100" viewbox="0 0 1400 200">
<circle cx="50" cy="50" r="20" fill="red" />
<circle cx="100" cy="50" r="20" fill="red" />
<circle cx="150" cy="50" r="20" fill="red" />
<circle cx="200" cy="50" r="20" fill="red" />
<circle cx="250" cy="50" r="20" fill="red" />
<circle cx="300" cy="50" r="20" fill="red" />
<circle cx="350" cy="50" r="20" fill="red" />
<circle cx="400" cy="50" r="20" fill="red" />
<circle cx="450" cy="50" r="20" fill="red" />
<circle cx="500" cy="50" r="20" fill="red" />
</svg>





circle := [:cx :cy :r :fill| '<circle cx="', cx printString, '" cy="', cy printString, '" r="', r printString, '" fill="', fill, '" />'].

Transcript clear.
Transcript show: '<html><svg width="700" height="100" viewbox="0 0 1400 200">';cr.

1 to: 10 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'red'); cr].

11 to: 20 do: [:i |
Transcript show: (circle value: (i*50) value: 50 value: 20 value: 'blue'); cr].

Transcript show: '</svg></html>';cr.




Continue SVG construction example 2 - rect (rectangle) and text (XMLElement)