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

nakkkk

已于 2023-05-01 20:34:05 修改

阅读量397

点赞数

文章标签：前端 html

于 2023-05-01 20:33:09 首次发布

本文链接：https://blog.csdn.net/na596/article/details/130458334

版权

本文介绍了SVG（可伸缩矢量图形）作为非光栅图像格式的优势，展示了如何在HTML中通过内嵌SVG标签创建一个时钟，包括使用XML标记描述图形、CSS样式设置以及JavaScript动态更新时针和分针的方法。

摘要由CSDN通过智能技术生成

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>

实现效果如下：