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 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