22
edits
Changes
Jump to navigation
Jump to search
Created page with "==Simple drawing with SVG== thumb|Basic clock faceYou can create simple ''clock face'' figure with scalar vector graphic (SVG). * Since it is natural to use..."
==Simple drawing with SVG==
[[File:basic.svg|thumb|Basic clock face]]You can create simple ''clock face'' figure with scalar vector graphic (SVG).
* Since it is natural to use polar coordinates for circular figure like this, draw the circle around the origin, then translate to visible SVG user space.
<svg viewBox="-100 -100 200 200"
xmlns="http://www.w3.org/2000/svg">
<circle r="100" stroke="black" />
</svg>
* To draw ticks, use <code>stroke-dasharray</code> attribute noting that, with <code>r="57.3"</code>, the circumference length of the circle becomes 360, thus one stroke every six marks the minute marks.
<svg viewBox="-100 -100 200 200"
stroke="black" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle r="57.3" transform="scale(1.07) rotate(-0.5)" stroke-dasharray="1 5"/>
</svg>
Note <code>scale(1.07)</code> makes the circle radius 60 for a nice round number, and <code>rotate(-0.5)</code> correct for <code>stroke-dasharray</code> offset
* You can also correct for the offset with something like this
<circle r="57.3" stroke-dasharray="0.5 29 0.5 0" stroke-width="8"/>
[[File:basic.svg|thumb|Basic clock face]]You can create simple ''clock face'' figure with scalar vector graphic (SVG).
* Since it is natural to use polar coordinates for circular figure like this, draw the circle around the origin, then translate to visible SVG user space.
<svg viewBox="-100 -100 200 200"
xmlns="http://www.w3.org/2000/svg">
<circle r="100" stroke="black" />
</svg>
* To draw ticks, use <code>stroke-dasharray</code> attribute noting that, with <code>r="57.3"</code>, the circumference length of the circle becomes 360, thus one stroke every six marks the minute marks.
<svg viewBox="-100 -100 200 200"
stroke="black" fill="none"
xmlns="http://www.w3.org/2000/svg">
<circle r="57.3" transform="scale(1.07) rotate(-0.5)" stroke-dasharray="1 5"/>
</svg>
Note <code>scale(1.07)</code> makes the circle radius 60 for a nice round number, and <code>rotate(-0.5)</code> correct for <code>stroke-dasharray</code> offset
* You can also correct for the offset with something like this
<circle r="57.3" stroke-dasharray="0.5 29 0.5 0" stroke-width="8"/>
