✨SVG Clock

browser ⟩ SVG ⟩ examples ⟩ clock

💾 程式

💾 replit: SVG Clock

    <!-- The viewBox attribute gives the internal coordinate system -->
    <!-- The width and height attributes are the screen size of the graphic -->
    <svg id="clock" viewBox="0 0 100 100" width="250" height="250">

        <!-- clock face -->
        <circle class="face" cx="50" cy="50" r="45" /> 

        <!-- tick marks for each of the 12 hours -->
        <g class="ticks">
            <line x1='50'    y1='5.000' x2='50.00' y2='10.00' />
            <line x1='72.50' y1='11.03' x2='70.00' y2='15.36' />
            <line x1='88.97' y1='27.50' x2='84.64' y2='30.00' />
            <line x1='95.00' y1='50.00' x2='90.00' y2='50.00' />
            <line x1='88.97' y1='72.50' x2='84.64' y2='70.00' />
            <line x1='72.50' y1='88.97' x2='70.00' y2='84.64' />
            <line x1='50.00' y1='95.00' x2='50.00' y2='90.00' />
            <line x1='27.50' y1='88.97' x2='30.00' y2='84.64' />
            <line x1='11.03' y1='72.50' x2='15.36' y2='70.00' />
            <line x1='5.000' y1='50.00' x2='10.00' y2='50.00' />
            <line x1='11.03' y1='27.50' x2='15.36' y2='30.00' />
            <line x1='27.50' y1='11.03' x2='30.00' y2='15.36' />
        </g>

        <!-- Number the cardinal directions-->
        <g class="numbers">
            <text x="50" y="18">12</text>
            <text x="85" y="53">3</text>
            <text x="50" y="88">6</text>
            <text x="15" y="53">9</text>
        </g>

        <!-- Draw hands pointing straight up. -->
        <g class="hands">  
            <line class="hourhand"   x1="50" y1="50" x2="50" y2="25" />
            <line class="minutehand" x1="50" y1="50" x2="50" y2="20" />
        </g>
                
    </svg>

• CSS

/* Styles for everything in the clock: */
#clock { 
    stroke: black;         /* black lines */
    stroke-linecap: round;   /* with rounded ends */
    fill: #ffe;            /* on an off-white background */ 
} 

#clock .face  { stroke-width: 3; } /* Clock face outline */ 
#clock .ticks { stroke-width: 2; } /* Lines that mark each hour */ 
#clock .hands { stroke-width: 3; } /* How to draw the clock hands */ 

/* How to draw the numbers */
#clock .numbers { 
    
    /* ⭐ Note: CSS `font` shorthand property does NOT work for SVG tags */
    font-family: sans-serif; 
    font-size: 10; 
    font-weight: bold;
    
    text-anchor: middle; 
    stroke: none; 
    fill: black; 
}

Second Tab