基于svg+js实现简单动态时钟

实现思路

1. 创建SVG容器：首先，创建一个SVG容器元素，用于容纳时钟的各个部分。指定SVG的宽度、高度以及命名空间。

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  
svg>

2. 绘制时钟的圆形背景：使用SVG的 （也可以用方形、椭圆）元素来绘制时钟的圆形背景。指定圆心坐标、半径和填充颜色。

<circle cx="100" cy="100" r="90" fill="white" stroke="black" stroke-width="2" />

3. 绘制时钟的刻度线：绘制时钟的刻度线，包括小时刻度和分钟刻度。可以使用 元素来表示每个刻度线。通过循环来创建12个小时刻度和60个分钟刻度。

<line x1="100" y1="10" x2="100" y2="20" stroke="black" stroke-width="2" transform="rotate(30)" />


  <circle cx="50" cy="50" r="40" fill="red" stroke="blue" stroke-width="2" />
svg>

文字

SVG中的文字属性允许你在图形中插入文本，并以多种方式自定义文本的外观。以下是SVG中常用的文字属性：

1. x 和 y 属性：x 和 y 属性用于指定文本的起始坐标，即文本的左上角（如果文本是从左到右书写，或者是文本的起点）的坐标。这些坐标值是以用户单位（通常是像素）为单位的坐标值。

2. font-family 属性：font-family 属性用于指定文本的字体系列。你可以设置字体系列的名称，以便SVG渲染引擎查找可用的字体。例如，font-family="Arial, sans-serif" 表示首选Arial字体，如果不可用，则使用默认的sans-serif字体。

3. font-size 属性：font-size 属性用于指定文本的字体大小，以用户单位（通常是像素）为单位。例如，font-size="12" 表示字体大小为12个用户单位。

4. font-weight 属性：font-weight 属性用于设置文本的粗细，可以取值如 “normal”、“bold” 或数字值（如 400 表示 normal，700 表示 bold）。

5. font-style 属性：font-style 属性用于设置文本的字体风格，可以取值如 “normal”、“italic” 或 “oblique”。

6. text-anchor 属性：text-anchor 属性定义文本的水平对齐方式。可以取值如 “start”（默认，文本的起点对齐到指定的x坐标）、“middle”（文本的中点对齐到指定的x坐标）、“end”（文本的末尾对齐到指定的x坐标）。

7. dominant-baseline 属性：dominant-baseline 属性定义文本的垂直对齐方式。可以取值如 “auto”（默认，文本基线对齐到y坐标）、“middle”（文本中点对齐到y坐标）、“text-before-edge”（文本的顶部对齐到y坐标）等。

8. text-decoration 属性：text-decoration 属性用于添加文本的装饰效果，如下划线、删除线等。可以取值如 “none”（默认，无装饰）、“underline”（下划线）。

9. fill 属性：fill 属性用于设置文本的填充颜色，类似于图形元素的填充属性。你可以使用颜色值来指定填充颜色。

10. fill-opacity 属性：fill-opacity 属性用于定义文本填充颜色的透明度，其值范围从0（完全透明）到1（完全不透明）。

以下是一个示例：

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="100">
  
  <text x="50" y="50" font-family="Arial, sans-serif" font-size="24" font-weight="bold" fill="red">
    Hello, SVG Text!
  text>
svg>