SVG construction example 6 - path
Last updated at 10:13 am UTC on 16 May 2019
Paste the following Squeak code which produces SVG code into a Workspace and execute it.
| y |
Transcript clear.
Transcript show: '<html>';cr.
Transcript show: '<svg width="800" height="80" '.
Transcript show: 'viewBox ="0 0 1000 200" '; cr.
Transcript show: 'xmlns="http://www.w3.org/2000/svg">'; cr.
Transcript show: ' <path d="';cr.
y := '15'.
0 to: 100 do: [: i | |x xP1 | x := (i * 10) asString.
xP1 := (i +1* 10) asString.
y2 := '10'.
(i +1\\ 5) = 0 ifTrue: [y2 := '5'].
(i +1\\ 10) = 0 ifTrue: [y2 := '0'].
Transcript show: 'M',x,' ', y, ' L',xP1, ' ',y, ' L',xP1, ' ',y2; cr].
Transcript show: '"'; cr; show: 'fill="none" stroke="red"/>';cr;cr.
Transcript show: '</svg>';cr.
Transcript show: '</html>';cr.
The resulting html/svg code has been pasted below into the wiki page and is rendered through the browser.
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<path d="M10 10 H 90 V 90 H 10 L 10 10" fill="none" stroke="red"/>
<!-- Points -->
<circle cx="10" cy="10" r="2" fill="red"/>
<circle cx="90" cy="90" r="2" fill="red"/>
<circle cx="90" cy="10" r="2" fill="red"/>
<circle cx="10" cy="90" r="2" fill="red"/>
</svg>
Example of a svg path embedded in Libreoffice Draw code
<draw:path draw:style-name="gr1" draw:text-style-name="P3" draw:layer="layout"
svg:width="1cm" svg:height="1cm" svg:x="0.4cm" svg:y="0.4cm"
svg:viewBox="0 0 1400 1400"
svg:d="M400 400 L1980 400 M2000 410 L1920 320 M2000 390 L1920 480">
<text:p/>
</draw:path>
tagBeginner
