无锡网站建设推荐,网络营销的优势,房屋不动产查询官网,申请友情链接实现思路
创建SVG容器#xff1a;首先#xff0c;创建一个SVG容器元素#xff0c;用于容纳时钟的各个部分。指定SVG的宽度、高度以及命名空间。
svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 在此添加时钟…实现思路
创建SVG容器首先创建一个SVG容器元素用于容纳时钟的各个部分。指定SVG的宽度、高度以及命名空间。
svg width200 height200 xmlnshttp://www.w3.org/2000/svg!-- 在此添加时钟的元素 --
/svg绘制时钟的圆形背景使用SVG的 circle 也可以用方形、椭圆元素来绘制时钟的圆形背景。指定圆心坐标、半径和填充颜色。
!-- 圆心为100100半径为90填充色fill这里是白色, 边框色stroke为黑色边框宽度2px --
circle cx100 cy100 r90 fillwhite strokeblack stroke-width2 /绘制时钟的刻度线绘制时钟的刻度线包括小时刻度和分钟刻度。可以使用 line 元素来表示每个刻度线。通过循环来创建12个小时刻度和60个分钟刻度。
!-- 小时刻度 --
line x1100 y110 x2100 y220 strokeblack stroke-width2 transformrotate(30) /!-- 分钟刻度 */
line x1100 y110 x2100 y215 strokeblack stroke-width1 transformrotate(6) /
绘制时钟的指针绘制时钟的时针、分针和秒针。可以使用 line 元素来表示每个指针根据当前时间的小时、分钟和秒数来计算指针的角度。
!-- 时针 */
line x1100 y1100 x2100 y260 strokeblack stroke-width4 transformrotate(30) /!-- 分针 */
line x1100 y1100 x2100 y240 strokeblack stroke-width3 transformrotate(180) /!-- 秒针 */
line x1100 y1100 x2100 y230 strokered stroke-width1 transformrotate(90) /添加数字标识在时钟的圆周上添加小时数字标识。你可以使用 text 元素来添加小时数字并使用 text-anchor 和 dominant-baseline 属性来对齐文本。
text x100 y25 font-size14 text-anchormiddle dominant-baselinemiddle12/text
!-- 其他数字 */更新时钟时间要让时钟显示实际的时间需要使用JavaScript来更新时针、分针和秒针的角度。你可以使用setInterval或requestAnimationFrame来定期更新时钟。
function updateClock() {const now new Date();const hours now.getHours() % 12;const minutes now.getMinutes();const seconds now.getSeconds();// 计算时针、分针、秒针的角度并更新const hourAngle (360 / 12) * (hours minutes / 60);const minuteAngle (360 / 60) * (minutes seconds / 60);const secondAngle (360 / 60) * seconds;// 更新时针、分针、秒针的变换属性hourHand.setAttribute(transform, rotate(${hourAngle}, 100, 100));minuteHand.setAttribute(transform, rotate(${minuteAngle}, 100, 100));secondHand.setAttribute(transform, rotate(${secondAngle}, 100, 100));
}setInterval(updateClock, 1000); // 每秒更新一次完整的代码如下
!DOCTYPE html
htmlheadstyle#clock {width: 200px;height: 200px;}.number {font-family: Arial, sans-serif;font-size: 12px;text-anchor: middle;}/style
/headbodysvg idclock xmlnshttp://www.w3.org/2000/svgcircle cx100 cy100 r90 strokeblack stroke-width2 fillLavender /line x1100 y1100 x2100 y245 strokeblack stroke-width5 idhour-hand /line x1100 y1100 x2100 y225 strokeblack stroke-width3 idminute-hand /line x1100 y1100 x2100 y215 strokered stroke-width1 idsecond-hand /circle cx100 cy100 r4 strokeblack stroke-width2 fillgray /g idnumbers transformtranslate(100,100)text x0 y-75 classnumber12/texttext x80 y5 classnumber3/texttext x0 y80 classnumber6/texttext x-80 y5 classnumber9/text/gg idticks transformtranslate(100,100)!-- 刻度线每5分钟一个 --line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(30) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(60) /line x10 y1-85 x20 y2-90 strokeblack stroke-width1 transformrotate(90) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(120) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(150) /line x10 y1-85 x20 y2-90 strokeblack stroke-width1 transformrotate(180) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(210) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(240) /line x10 y1-85 x20 y2-90 strokeblack stroke-width1 transformrotate(270) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(300) /line x10 y1-80 x20 y2-90 strokeblack stroke-width1 transformrotate(330) /line x10 y1-85 x20 y2-90 strokeblack stroke-width1 transformrotate(360) //g/svgscriptfunction updateClock() {const now new Date();const hours now.getHours() % 12;const minutes now.getMinutes();const seconds now.getSeconds();const hourHand document.getElementById(hour-hand);const minuteHand document.getElementById(minute-hand);const secondHand document.getElementById(second-hand);const hourDeg (360 / 12) * hours (360 / 12) * (minutes / 60);const minuteDeg (360 / 60) * minutes;const secondDeg (360 / 60) * seconds;hourHand.setAttribute(transform, rotate(${hourDeg}, 100, 100));minuteHand.setAttribute(transform, rotate(${minuteDeg}, 100, 100));secondHand.setAttribute(transform, rotate(${secondDeg}, 100, 100));}setInterval(updateClock, 1000); // 每秒更新一次时钟updateClock(); // 初始加载时钟/script
/body/html一个简单的时钟就做好了svg还可以实现很多图形。下面将介绍svg的使用
svg详解
坐标
svg使用坐标系统来定位图形元素这个坐标系统是基于画布的左上角为原点的坐标系。坐标以像素为单位x 轴正方向是向右y 轴正方向是向下。 说到像素就要介绍另一个很重要的属性viewBox。viewBox 属性的值是一个包含 4 个参数的列表 min-x, min-y, width and height以空格或者逗号分隔开在用户空间中指定一个矩形区域映射到给定的元素。 例如
svg width200 height200 viewBox0 0 100 100…/svgwidth和 height 属性定义了SVG元素的宽度和高度即视口的尺寸。在此示例中视口的宽度为200个用户单位高度为200个用户单位。viewBox 属性的值 0 0 100 100 定义了视口的坐标系统。具体来说它表示视口的左上角坐标为 (0, 0)视口的宽度为100个用户单位高度为100个用户单位。 这个 100100 的区域会放到 200200 的画布上显示。于是就形成了放大两倍的效果。
viewBox 的作用是
控制可视区域它确定了用户坐标系统中哪一部分会在视口中可见。在这个示例中它定义了一个正方形视口它与SVG元素的宽度和高度不同因此可以用来控制用户坐标系统中的图形在视口中如何显示。缩放和平移viewBox 可以通过设置不同的值来实现缩放和平移效果。例如如果将 viewBox 设置为 0 0 200 200那么视口会变得较大用户坐标系统中的内容将以更小的比例显示在视口中实现了缩放效果。实现响应式设计viewBox 可用于实现响应式设计允许SVG图形在不同尺寸的容器中自适应调整而不会失真或变形。
图形
1、矩形rect
rect常用的属性: x左上角的x坐标y左上角y的坐标width宽。height高rx圆角x方位的半径ry圆角y方位的半径
rect x10 y10 width30 height30/
rect x60 y10 rx10 ry10 width30 height30/2、圆形 circle有三个基本的属性cx圆心的x坐标cy圆心的y坐标r:半径
circle cx100 cy100 r90 /3、椭圆 ellipse 椭圆有四个基本属性 cx圆心的x坐标cy圆心的y坐标rxx轴半径ryy轴半径。
ellipse cx75 cy75 rx20 ry5/4、线条
line x110 x250 y1110 y2150 strokeblack stroke-width5/x1起点x位置y1起点的y位置x2终点的x位置y2终点的y位置
5、折线 polygon points50 180, 160 55, 180 70, 180 60, 190 65, 205 50, 195 35, 205 40, 190 30, 180 80 fillwhite strokeblack/折线就是很多个点之间的连线points属性就放各个点的坐标用逗号隔开
路径
SVG 中的 path 元素用于创建复杂的路径和轮廓它可以包括各种路径命令每个命令都对路径的构建产生不同的影响。以下是 SVG path 元素中常用的路径命令及其意义 **M **移动到指定的坐标位置。 M x y将当前点移动到(x, y)的位置而不绘制线条。 **L **从当前点绘制一条直线到指定的坐标位置。 L x y从当前点绘制一条直线到(x, y)的位置。 **H **从当前点绘制一条水平线到指定的 x 坐标位置。 H x从当前点绘制一条水平线到(x, 当前 y)的位置。 V从当前点绘制一条垂直线到指定的 y 坐标位置。 V y从当前点绘制一条垂直线到(当前 x, y)的位置。 **C **绘制三次贝塞尔曲线。 C x1 y1, x2 y2, x y从当前点绘制一条三次贝塞尔曲线使用控制点 (x1, y1) 和 (x2, y2)终点为 (x, y)。 **S **绘制平滑的三次贝塞尔曲线。 S x2 y2, x y从当前点绘制一条平滑的三次贝塞尔曲线只指定一个控制点 (x2, y2)终点为 (x, y)。第一个控制点自动与上一次曲线的终点对称。 Q绘制二次贝塞尔曲线。 Q x1 y1, x y从当前点绘制一条二次贝塞尔曲线使用控制点 (x1, y1)终点为 (x, y)。 **T **绘制平滑的二次贝塞尔曲线。 T x y从当前点绘制一条平滑的二次贝塞尔曲线只指定一个控制点 (x, y)。控制点自动与上一次曲线的终点对称。 **A **绘制椭圆弧。 A rx ry x-axis-rotation large-arc-flag sweep-flag x y绘制椭圆弧其中 (rx, ry) 是椭圆的半长轴和半短轴x-axis-rotation 是椭圆的旋转角度large-arc-flag 表示大弧还是小弧sweep-flag 表示顺时针还是逆时针(x, y) 是弧的终点。 Z (Close Path)关闭路径连接当前点与路径的起始点形成封闭的形状。
这些路径命令可以组合使用以创建各种形状和轮廓。路径命令通常以字母表示后跟一个或多个参数参数用逗号或空格分隔。你可以使用 path 元素来定义路径将路径命令放在 d 属性中如下所示
path dM 10 10 L 50 10 L 50 50 L 10 50 Z /上面的示例绘制一个矩形首先移动到 (10, 10)然后绘制四条线段最后使用 Z 命令关闭路径。路径命令的顺序和参数的值决定了路径的形状。
边框与填充 边框Stroke stroke 属性stroke 属性用于指定图形元素的边框颜色。可以使用颜色值如颜色名称、十六进制值或RGB值来设置边框颜色。stroke-width 属性stroke-width 属性用于指定边框的宽度以用户单位通常是像素为单位。stroke-linecap 属性stroke-linecap 属性定义了线段的端点样式。它可以取三个值之一butt默认平直的端点、round圆形的端点、square方形的端点。stroke-linejoin 属性stroke-linejoin 属性定义了线段的连接样式。它可以取三个值之一miter默认尖角连接、round圆角连接、bevel斜角连接。stroke-dasharray 属性stroke-dasharray 属性定义了虚线的模式即一系列数字用来交替表示实线和空白线段的长度。例如stroke-dasharray5,2 表示5个单位的实线和2个单位的空白线。stroke-opacity 属性stroke-opacity 属性用于定义边框的透明度其值范围从0完全透明到1完全不透明。 填充Fill fill 属性fill 属性用于指定图形元素的填充颜色。你可以使用颜色值来设置填充颜色。fill-opacity 属性fill-opacity 属性用于定义填充颜色的透明度其值范围从0完全透明到1完全不透明。
以下是一个示例演示如何在SVG中应用边框和填充
svg xmlnshttp://www.w3.org/2000/svg width100 height100!-- 红色填充蓝色边框边框宽度为2圆形 --circle cx50 cy50 r40 fillred strokeblue stroke-width2 /
/svg文字
SVG中的文字属性允许你在图形中插入文本并以多种方式自定义文本的外观。以下是SVG中常用的文字属性 x 和 y 属性x 和 y 属性用于指定文本的起始坐标即文本的左上角如果文本是从左到右书写或者是文本的起点的坐标。这些坐标值是以用户单位通常是像素为单位的坐标值。 font-family 属性font-family 属性用于指定文本的字体系列。你可以设置字体系列的名称以便SVG渲染引擎查找可用的字体。例如font-familyArial, sans-serif 表示首选Arial字体如果不可用则使用默认的sans-serif字体。 font-size 属性font-size 属性用于指定文本的字体大小以用户单位通常是像素为单位。例如font-size12 表示字体大小为12个用户单位。 font-weight 属性font-weight 属性用于设置文本的粗细可以取值如 “normal”、“bold” 或数字值如 400 表示 normal700 表示 bold。 font-style 属性font-style 属性用于设置文本的字体风格可以取值如 “normal”、“italic” 或 “oblique”。 text-anchor 属性text-anchor 属性定义文本的水平对齐方式。可以取值如 “start”默认文本的起点对齐到指定的x坐标、“middle”文本的中点对齐到指定的x坐标、“end”文本的末尾对齐到指定的x坐标。 dominant-baseline 属性dominant-baseline 属性定义文本的垂直对齐方式。可以取值如 “auto”默认文本基线对齐到y坐标、“middle”文本中点对齐到y坐标、“text-before-edge”文本的顶部对齐到y坐标等。 text-decoration 属性text-decoration 属性用于添加文本的装饰效果如下划线、删除线等。可以取值如 “none”默认无装饰、“underline”下划线。 fill 属性fill 属性用于设置文本的填充颜色类似于图形元素的填充属性。你可以使用颜色值来指定填充颜色。 fill-opacity 属性fill-opacity 属性用于定义文本填充颜色的透明度其值范围从0完全透明到1完全不透明。
以下是一个示例
svg xmlnshttp://www.w3.org/2000/svg width200 height100!-- 在坐标 (50, 50) 处插入红色、粗体、24像素大小的文本 --text x50 y50 font-familyArial, sans-serif font-size24 font-weightbold fillredHello, SVG Text!/text
/svg
