SVG construction example 3 - circle and text
Last updated at 10:53 am UTC on 16 May 2019
Writing SVG code:
svgCode :=
'<svg xmlns="http://www.w3.org/2000/svg">
<circle cx="100" cy="100" r="100" fill="none" stroke="red"/>
<text x="100" y="100" font-size="60" text-anchor="middle" fill="green">circle</text>
</svg>'.
fileStream := FileStream newFileNamed: '../../../circle-and-text.svg'.
fileStream nextPutAll: svgCode.
fileStream close.
Example from https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text
svgCode :=
'<svg viewBox="0 0 240 80" xmlns="http://www.w3.org/2000/svg">
<style>
.small { font: italic 13px sans-serif; }
.heavy { font: bold 30px sans-serif; }
/* Note that the color of the text is set with the *
* fill property, the color property is for HTML only */
.Rrrrr { font: italic 40px serif; fill: red; }
</style>
<text x="20" y="35" class="small">My</text>
<text x="40" y="35" class="heavy">cat</text>
<text x="55" y="55" class="small">is</text>
<text x="65" y="55" class="Rrrrr">Grumpy!</text>
</svg>'.
fileStream := FileStream newFileNamed: '../../../text-elemenst-with-style.svg'.
fileStream nextPutAll: svgCode.
fileStream close.
Next
SVG construction example 4 - rect, circle and text