@mdb17 wrote:
I decided to try and learn how to make my own clock face. I have no previous experience with JavaScript or SVG.
To get started I am trying to modify the clock tutorial to look light the stock Sundial clock face and was wonder how you would recommend going about creating the tick marks around the face. I was able to get a rectangle to rotate around the center but I am having trouble setting the color.
<defs>
<symbol id="ticks">
<g id="ticksGroup" transform="translate(50%,50%) rotate(0)">
<rect id="rect1" x="$-1" y="-50%+1" width="2" height="5%" fill="red"/>
</g>
</symbol>
<symbol id="numbers">
<text font-family="System-Regular" fill="red"/>
</symbol>
</defs>
<use href="#ticks">
<set href="#ticksGroup" attributeName="transform" to="translate(50%,50%) rotate(6)"/>
</use>
<use href="#ticks">
<set href="#ticksGroup" attributeName="transform" to="translate(50%,50%) rotate(12)"/>
<set href="#rect1" attributeName="fill" to="white"/>
</use>
Also, Is there an easier way to generate all the tick marks other then copying and pasting 60 times?
Well,... if you want an element on the watch face, it seems you really do need to have a bunch of copies.
You can leverage the process using your css file.
I have less tick marks, and the code is like this:
index.gui:
<svg id="cFace">
<g transform="rotate(30)"><line/></g>
<g transform="rotate(60)"><line/></g>
<g transform="rotate(120)"><line/></g>
<g transform="rotate(150)"><line/></g>
<g transform="rotate(210)"><line/></g>
<g transform="rotate(240)"><line/></g>
<g transform="rotate(300)"><line/></g>
<g transform="rotate(330)"><line/></g>
</svg>
styles.css:
#cFace g line {
y1:-98;
y2:-117;
fill:white;
stroke-width:2;
}
Use the gui to place your element, and your css to define your repeated values
There may be another way to do this (perhaps through javaScript), but all javaScript is limited by memory.
Regards,
Reign
