SVG可伸缩矢量图形绘制钟表

SVG可伸缩矢量图形是一种图片格式。名字中的”矢量“代表着它与GIF,JPEG,PNG等指定像素阵的光栅（raster）图片格式有根本区别。它是一种对绘制期望图形的精确的、分辨率无关的描述。SVG图片在文本文件中通过XML标记语言描述。

在浏览器中有几种方式使用SVG：

在常规HTML<img>标签中使用.svg图片文件，就像使用.png或者.jpeg图片一样。
把SVG标签嵌入在HTML文档中，此时，浏览器的HTML解析器允许省略XML命名空间，并将SVG标签当成HTML标签一样处理。
使用DOM API动态创建SVG元素，按需生成图片。

以在HTML中嵌入svg举例：

这里以画一个时针举例。

<body><!-- viewBox属性用于定义图形内部的坐标系 --><svg id="clock" viewBox="0 0 100 100" width="250" height="250"><circle class="face" cx="50" cy="50" r="45"></circle><!-- 设置指针 --><g class="ticks"><line x1="50" y1="5" x2="50" y2="10"></line><line x1="72.5" y1="11.03" x2="70" y2="15.36"></line><line x1="88.97" y1="27.5" x2="84.64" y2="30"></line><line x1="95" y1="50" x2="90" y2="50"></line><line x1="88.97" y1="72.5" x2="84.64" y2="70"></line><line x1="72.5" y1="88.97" x2="70" y2="84.64"></line><line x1="50" y1="95" x2="50" y2="90"></line><line x1="27.5" y1="88.97" x2="30" y2="84.64"></line><line x1="11.03" y1="72.5" x2="15.36" y2="70"></line><line x1="5" y1="50" x2="10" y2="50"></line><line x1="11.03" y1="27.5" x2="15.36" y2="30"></line><line x1="27.5" y1="11.03" x2="30" y2="15.36"></line></g><!-- 设置主要数字 --><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><!-- 设置时针和分针 --><g class="hands"><line class="hourhand" x1="50" y1="50" x2="50" y2="25"></line><line class="minutehand" x1="50" y1="50" x2="50" y2="20"></line></g></svg>
</body>

设置样式：

    <style>#clock {/* 黑色线条 */stroke: black;/* 圆形端点 */stroke-linecap: round;/* 背景色 */fill: #ffe}/* 表盘轮廓 */#clock .face {stroke-width: 3;}/* 标记每小时刻度线 */#clock .ticks {stroke-width: 2;}/* 如何绘制指针 */#clock .hands {stroke-width: 3;}/* 如何绘制数字 */#clock .numbers {font-family: sans-serif;font-size: 12px;font-weight: bold;text-anchor: middle;stroke: none;fill: black;}</style>

js控制svg指针变化：

<script>(function updateClock() {let now = new Date();let sec = now.getSeconds();let min = now.getMinutes() + sec / 60;let hour = (now.getHours() % 12) + min / 60;//每分钟6度let minangle = min * 6;//每小时30度let hourangle = hour * 30;// 获取svg元素let minhand = document.querySelector("#clock .minutehand")let hourhand = document.querySelector("#clock .hourhand")//设置svg属性minhand.setAttribute("transform", `rotate(${minangle},50,50)`)hourhand.setAttribute("transform", `rotate(${hourangle},50,50)`)setTimeout(updateClock, 10000)}())</script>

实现效果如下：

测试用例来源于：《JavaScript权威指南》

SVG可伸缩矢量图形绘制钟表相关推荐

XML教程和SVG可伸缩矢量图形 (Scalable Vector Graphics)教程
XML教程 http://www.woyouxian.net/xml/xml_index.html 写的很好诶 SVG教程 http://www.woyouxian.net/z/web/svg/ind ...
基于html5的矢量图绘制方法研究,HTML5程序设计-绘制可伸缩矢量图形SVG.pdf
HTML5基础教程(第2版) 授课教师: 职务: 第7章绘制可伸缩矢量图形(SVG ) 课程描述 SVG是Scalable Vector Graphics的缩写,即可伸缩矢量图形,它使用XML格式 ...
绘制可伸缩矢量图形（SVG）
1.SVG概述可伸缩矢量图形(Scalable Vector Graphics,SVG)使用XML格式在Web上定义基于矢量的图形.矢量图形是根据几何特性来绘制的图形,矢量(Vector)可以是一个 ...
SVG可伸缩的矢量图形
SVG可伸缩的矢量图形 SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述.即对矢量图的描述在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图 ...
SVG可伸缩的矢量图形 1
SVG可伸缩的矢量图形 SVG是对画该图形时的一些路径,做出精准的,必要的与分辨率无关的一种描述.即对矢量图的描述在此安利一个svg绘图的网址,可以直接手动绘图,然后生成相关的svg描述,即可实现图 ...
HTML5: 利用SVG动画动态绘制文字轮廓边框线条
DEMO: 点击这里看效果简要教程这是一款很酷的html5 svg线条动态绘制文字轮廓边框动画特效.SVG路径动画在网页设计中是一项热门的技术,它允许我们绘制各种简单.精美的图标和文字.关于使用S ...
SVG(可伸缩向量图形)基础教程
来源: IBM developerWorks 中国 SVG(可伸缩向量图形)基础教程 Written by Nicholas Chase 2006-Jun-30 来源: IBM dev ...
php画钟,canvas如何绘制钟表的方法_html5教程技巧
这篇文章主要介绍了HTML5中的canvas如何绘制钟表的方法的相关资料,小编觉得HTML真的是越来越强大的,现在分享给大家,也给大家做个参考.对HTML的小伙伴们可以一起跟随小编过来看看吧本文介绍 ...
opengl绘制钟表
- -应付下实验吧 #include<cstdio> #include<time.h> #include<math.h> #include <GL/glut. ...

SVG可伸缩矢量图形绘制钟表

以在HTML中嵌入svg举例：

SVG可伸缩矢量图形绘制钟表相关推荐

最新文章

热门文章