HTML SVG路径动画

原创 已于 2025-07-25 13:45:28 修改 · 247 阅读 · 6 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#html #前端 #javascript

于 2024-08-01 09:37:06 首次发布
<template>
    <!-- <div id="inputContainer" class="inputContainer">
        <input type="number" id="positionInput" value="1100" style="border: 1px solid black;font-size: 24px;"
            placeholder="输入水平位置" />
        <button class="styled-button" @click="method.refresh">机器人移动</button>
    </div> -->
    <div>
        <h2 style="text-align: center;display: inline;">{{ data.titleContent }}</h2>
        <span style="float: right;">{{ data.refreshDatetime }}</span>
        <span style="float: right;">
            <span class="legend" style="background-color:burlywood;"></span>
            <span>准备中</span>
            <span class="legend" style="background-color: blue;"></span>
            <span>请求上料</span>
            <span class="legend" style="background-color: green;"></span>
            <span>处理中</span>
            <span class="legend" style="background-color: red;"></span>
            <span>完成</span>
            <span>——</span>
        </span>
    </div>

    <div style="background-color: white;width: 1440px;height: 840px;position: relative;">
        <canvas id="pathCanvas" class="pathStyle"></canvas>
        <svg class="path" viewBox="0 0 1440 840">
            <path id="linePath" stroke="aqua" stroke-width="2" fill="none" />
            <image class="arrow" xlink:href="../../../assets/img/Rotor.png" transform="translate(-20,-20)">
                <animateMotion repeatCount="indefinite" dur="5s" keyPoints="0;1" keyTimes="0;1">
                    <mpath href="#linePath" />
                </animateMotion>
            </image>
        </svg>
        <img id="background" class="background" src="../../../assets/img/P6144BackImage.png" alt="背景" />
        <div class="grid-container">
            <div v-for="(row, rowIndex) in data.grid" :key="rowIndex" class="grid-cell">
                <div v-for="(cell, cellIndex) in row" :key="cellIndex" class="grid-cell"
                    @mouseover="method.showCoordinates(rowIndex, cellIndex)" @mouseleave="method.hideCoordinates"
                    :class="{
                        'preparing-status-cell': method.setPreparingStatus(rowIndex, cellIndex),
                        'request-loading-status-cell': method.setRequestLoadingStatus(rowIndex, cellIndex),
                        'processing-status-cell': method.setProcessingStatus(rowIndex, cellIndex),
                        'finished-status-cell': method.setFinishedStatus(rowIndex, cellIndex),
                    }">
                    <div class="container">
                        <div class="station-font">{{ method.getStationName(rowIndex, cellIndex) }}</div>
                    </div>
                </div>
            </div>
        </div>
        <div class="track"></div>
        <img id="kuka" class="kuka" src="../../../assets/img/kuka.png" alt="机器人" />
        <!-- 坐标显示元素 -->
        <div v-if="data.showCoordinates" class="coordinates-display">
            {{ data.currentCoordinates }}
        </div>

    </div>

</template>

<script lang="ts" setup>
import { ref, reactive, onMounted } from 'vue'
import * as signalR from '@microsoft/signalr';
import { P6144StationVO } from '../../../types/WCS/Status'

const SERVER_URL = `${import.meta.env.VITE_BASE_PATH}:${import.meta.env.VITE_SERVER_PORT}`

interface FromTo {
    From: string;
    To: string;
    Action: string;
}

interface Point {
    x: number;
    y: number;
}

interface StatusScreenVO {
    Type: string;
    Content: string;
}

interface PublishTaskContentVO {
    Title: string;
    AnimationX: number;
}

enum StationStatusEnum {
    Preparing,
    RequestLoading,
    Processing,
    Finished,
}

enum Direction {
    Right,
    Left,
    Down,
    Up
}

const data = reactive({
    refreshDatetime: '',
    titleContent: 'title',
    grid: ref(Array.from({ length: 24 }, () => Array(28))),
    positionInput: ref<HTMLInputElement | null>(null),
    imageElement: ref<HTMLImageElement | null>(null),
    connection: ref<signalR.HubConnection | null>(null),
    hubConnection: new signalR.HubConnectionBuilder()
        .withUrl(SERVER_URL + '/TaskAnimationHub')
        .configureLogging(signalR.LogLevel.Information)
        .withServerTimeout(3600 * 1 * 1000)
        .build(),
    stationName: ref<{ x: number; y: number, station_code: string, station_name: string }[]>([
        { x: 2, y: 2, station_code: 'OP010', station_name: '' },
    ]),
    preparingLocation: ref<{ x: number; y: number, station_name: string }[]>([
        { x: 2, y: 2, station_name: 'OP010' },
    ]),
    requestLoadingLocation: ref<{ x: number; y: number, station_name: string }[]>([
        { x: 2, y: 8, station_name: 'OP040' },
    ]),
    processingLocation: ref<{ x: number; y: number, station_name: string }[]>([
        { x: 12, y: 2, station_name: 'OP070' },
    ]),
    finishedLocation: ref<{ x: number; y: number, station_name: string }[]>([
        { x: 12, y: 8, station_name: 'OP100' },
    ]),
    showCoordinates: false,
    currentCoordinates: '',

    lineWidth: 4,
    lineColor: 'aqua',
    triangleLength: 12,
    spaceBetween: 40,
    animationInProgress: false,
})

// 定义方法对象
const method = reactive({
    refresh: () => {
        if (data.positionInput) {
            const position = parseInt(data.positionInput.value, 14)
            if (!isNaN(position) && data.imageElement) {
                data.imageElement.style.left = position + 'px'
            } else {
                alert('请输入一个有效的数字')
            }
        }
    },
    drawTriangle: (ctx: CanvasRenderingContext2D, point: Point, direction: Direction) => {
        const length = data.triangleLength;

        ctx.strokeStyle = data.lineColor;
        ctx.lineWidth = data.lineWidth;
        ctx.beginPath();

        switch (direction) {
            case Direction.Right:
                ctx.moveTo(point.y - length, point.x - length);
                ctx.lineTo(point.y, point.x);
                ctx.lineTo(point.y - length, point.x + length);
                break;
            case Direction.Left:
                ctx.moveTo(point.y + length, point.x - length);
                ctx.lineTo(point.y, point.x);
                ctx.lineTo(point.y + length, point.x + length);
                break;
            case Direction.Down:
                ctx.moveTo(point.y - length, point.x - length);
                ctx.lineTo(point.y, point.x);
                ctx.lineTo(point.y + length, point.x - length);
                break;
            case Direction.Up:
                ctx.moveTo(point.y + length, point.x + length);
                ctx.lineTo(point.y, point.x);
                ctx.lineTo(point.y - length, point.x + length);
                break;
        }

        //ctx.closePath();
        ctx.stroke();
    },
    drawPath: (from: string, to: string,action:string) => {
        //找from to的坐标
        const height = 30;
        const width = 60;
        const trackHeight = 410;
        const fromX: number = data.stationName.find(station => station.station_code === from)?.x as number;
        const fromY: number = data.stationName.find(station => station.station_code === from)?.y as number;
        const toX: number = data.stationName.find(station => station.station_code === to)?.x as number;
        const toY: number = data.stationName.find(station => station.station_code === to)?.y as number;
        const takePoint: Point = { x: (fromX) * height + height / 2, y: (fromY) * width + width / 2 };
        const takeTrack: Point = { x: trackHeight, y: fromY * width + width / 2 };
        const putTrack: Point = { x: trackHeight, y: toY * width + width / 2 };
        const putPoint: Point = { x: toX * height + height / 2, y: toY * width + width / 2 };


        const canvas = document.getElementById('pathCanvas') as HTMLCanvasElement;
        const ctx = canvas.getContext('2d');

        const pathElement = document.getElementById('linePath') as unknown as SVGPathElement;

        if(action==="Finished" && ctx){
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            pathElement.setAttribute('d', '');
            return;
        }

        
        if (pathElement) {
            const d = `
            M${takePoint.y},${takePoint.x}
            L${takeTrack.y},${takeTrack.x}
            L${putTrack.y},${putTrack.x}
            L${putPoint.y},${putPoint.x}`;
            pathElement.setAttribute('d', d);
        }

        if (ctx) {
            ctx.clearRect(0, 0, canvas.width, canvas.height); // 清除之前绘制的路径

            ctx.lineWidth = data.lineWidth;
            ctx.strokeStyle = data.lineColor;

            ctx.beginPath();
            ctx.moveTo(takePoint.y, takePoint.x); // 起始点  
            ctx.lineTo(takeTrack.y, takeTrack.x); // 终点  
            ctx.stroke(); // 执行绘制 

            ctx.beginPath();
            ctx.moveTo(takeTrack.y, takeTrack.x); // 起始点  
            ctx.lineTo(putTrack.y, putTrack.x); // 终点  
            ctx.stroke(); // 执行绘制 

            ctx.beginPath();
            ctx.moveTo(putTrack.y, putTrack.x); // 起始点  
            ctx.lineTo(putPoint.y, putPoint.x); // 终点  
            ctx.stroke(); // 执行绘制 

            // 绘制箭头 takePoint水平方向小于takeTrack，则箭头向下
            if (takePoint.x < takeTrack.x) {
                method.drawTriangle(ctx, takeTrack, Direction.Down);
            } else {
                method.drawTriangle(ctx, takeTrack, Direction.Up);
            }
            // 绘制箭头takeTrack垂直方向小于putTrack，则箭头向右
            if (takeTrack.y < putTrack.y) {
                // while (takeTrack.y < putTrack.y) {
                //     method.drawTriangle(ctx, takeTrack, Direction.Right);
                //     takeTrack.y += data.spaceBetween;
                // }
                method.drawTriangle(ctx, putTrack, Direction.Right);
            } else {
                // while (putTrack.y < takeTrack.y) {
                //     method.drawTriangle(ctx, putTrack, Direction.Left);
                //     putTrack.y += data.spaceBetween;
                // }
                method.drawTriangle(ctx, putTrack, Direction.Left);
            }
            //绘制箭头 putTrack水平方向小于putPoint，则箭头向下
            if (putTrack.x < putPoint.x) {
                method.drawTriangle(ctx, putPoint, Direction.Down);
            } else {
                method.drawTriangle(ctx, putPoint, Direction.Up);
            }
        }
    },
    signalR_Listen: () => {
        data.hubConnection.on('ReciveMsg', (message: string) => {
            console.log('Received message:', message);
            const parsedData = JSON.parse(message);
            const statusScreen: StatusScreenVO = parsedData as StatusScreenVO;
            var type = statusScreen.Type;
            if (type === "RobotAnimation") {
                const robotAnimation = JSON.parse(statusScreen.Content) as PublishTaskContentVO;
                var title = JSON.parse(robotAnimation.Title) as FromTo;
                data.titleContent = "从：" + title.From + " 到：" + title.To + " 动作：" + title.Action;
                //console.log('Received Content:', taskInfo.Title);
                if (data.imageElement) {
                    //console.log('AnimationX:', robotAnimation.AnimationX);
                    data.imageElement.style.left = robotAnimation.AnimationX + 'px';
                }
                method.drawPath(title.From, title.To,title.Action);
            };
            if (type === "StationStatus") {
                const stationStatus = JSON.parse(statusScreen.Content) as P6144StationVO[];
                // console.log('StationStatus:', stationStatus);
                //data.preparingLocation.length = 0;
                data.stationName = stationStatus.map(item => ({ x: item.status_x, y: item.status_y, station_code: item.station_code, station_name: item.station_name }));
                data.preparingLocation = stationStatus
                    .filter(item => item.status === StationStatusEnum[StationStatusEnum.Preparing])
                    .map(item => ({ x: item.status_x, y: item.status_y, station_name: item.station_code }));
                // console.log('StationStatusEnum Preparing:', StationStatusEnum[StationStatusEnum.Preparing]);
                // console.log('preparingLocation Content:', data.preparingLocation);
                //data.requestLoadingLocation.length = 0;
                data.requestLoadingLocation = stationStatus
                    .filter(item => item.status === StationStatusEnum[StationStatusEnum.RequestLoading])
                    .map(item => ({ x: item.status_x, y: item.status_y, station_name: item.station_code }));
                //data.processingLocation.length = 0;
                data.processingLocation = stationStatus
                    .filter(item => item.status === StationStatusEnum[StationStatusEnum.Processing])
                    .map(item => ({ x: item.status_x, y: item.status_y, station_name: item.station_code }));
                //data.finishedLocation.length = 0;
                data.finishedLocation = stationStatus
                    .filter(item => item.status === StationStatusEnum[StationStatusEnum.Finished])
                    .map(item => ({ x: item.status_x, y: item.status_y, station_name: item.station_code }));
            };
            data.refreshDatetime = "刷新时间:" + (new Date()).toLocaleString('cn-ZH', {
                year: 'numeric',
                month: '2-digit',
                day: '2-digit',
                hour: '2-digit',
                minute: '2-digit',
                second: '2-digit'
            });
        });
    },
    signalRConnect: async () => {
        try {
            await data.hubConnection.start();
            console.log('Connected!');
            data.connection = data.hubConnection; // 保存连接实例以便后续使用
        } catch (err) {
            console.error('SignalR Connection Error:', err);
        }
    },
    setPreparingStatus: (row: number, col: number) => {
        return data.preparingLocation.some(coord => coord.x === col && coord.y === row);
    },
    setRequestLoadingStatus: (row: number, col: number) => {
        return data.requestLoadingLocation.some(coord => coord.x === col && coord.y === row);
    },
    setProcessingStatus: (row: number, col: number) => {
        return data.processingLocation.some(coord => coord.x === col && coord.y === row);
    },
    setFinishedStatus: (row: number, col: number) => {
        return data.finishedLocation.some(coord => coord.x === col && coord.y === row);
    },
    getStationName: (row, col) => {
        const coordinate = data.stationName.find(coord => coord.x === col && coord.y === row);
        return coordinate ? coordinate.station_code : ""; // 如果找到匹配的坐标，则返回其status，否则返回空字符串  
    },
    showCoordinates: (row, col) => {
        var stationName = data.stationName.find(coord => coord.x === col && coord.y === row)?.station_name;
        data.showCoordinates = true;
        data.currentCoordinates = `${stationName},Row: ${row}, Col: ${col}`;
        //console.log(stationName);
    },
    hideCoordinates: () => {
        data.showCoordinates = false;
        data.currentCoordinates = '';
    }
})

const MAX_RECONNECT_ATTEMPTS = 1200; // 最大重连尝试次数  
let reconnectAttempts = 0; // 当前重连尝试次数  

// 添加一个用于重连的方法  
const reconnect = () => {
    if (reconnectAttempts < MAX_RECONNECT_ATTEMPTS) {
        reconnectAttempts++;
        console.log(`Attempting to reconnect... (${reconnectAttempts}/${MAX_RECONNECT_ATTEMPTS})`);
        setTimeout(async () => {
            try {
                await data.hubConnection.start();
                console.log('Reconnected!');
                reconnectAttempts = 0; // 重置重连尝试次数  
                method.signalR_Listen(); // 重新绑定事件监听器  
            } catch (err) {
                reconnect(); // 如果连接失败，则递归尝试重新连接  
            }
        }, 2000); // 等待2秒后重试连接  
    } else {
        console.error('Max reconnect attempts reached.');
    }
};

// 使用 onMounted 来获取 DOM 元素引用
onMounted(() => {
    data.positionInput = document.getElementById('positionInput') as HTMLInputElement
    data.imageElement = document.getElementById('kuka') as HTMLImageElement
    method.signalRConnect();
    method.signalR_Listen();
    // 监听连接断开事件，并尝试重新连接  
    data.hubConnection.onclose(async (error) => {
        if (error) {
            console.error('Connection closed with error:', error);
        }
        reconnect(); // 当连接断开时尝试重新连接  
    });

    const canvas = document.getElementById('pathCanvas') as HTMLCanvasElement;
    const ctx = canvas.getContext('2d');
    if (ctx) {
        const scaleFactor = 1;
        const scaledWidth = 1440 * scaleFactor;
        const scaledHeight = 840 * scaleFactor;
        canvas.width = scaledWidth;
        canvas.height = scaledHeight;
        ctx.scale(scaleFactor, scaleFactor);
        ctx.lineWidth = 1;
        ctx.strokeStyle = 'green';
    }
})
</script>

<style lang="less" scoped>
.kuka {
    position: absolute;
    top: 350px;
    left: 300px;
    transform: translateX(0%);
    z-index: 30;
    width: 100px;
    height: auto;
    transition: left 3s ease-in-out;
}

.track {
    position: absolute;
    top: 350px;
    transform: translateX(0%);
    z-index: 20;
    width: 890px;
    height: 120px;
    background-color: rgb(190, 190, 114);
    opacity: 0.9;
    margin-left: 300px;
    margin-right: 250px;
}

.background {
    z-index: 9;
    position: absolute;
    top: 0px;
    left: 0%;
    transform: translateX(0%);
    width: 1440px;
    height: 840px;
}

.inputContainer {
    margin-bottom: 20px;
}

.grid-container {
    display: grid;
    grid-template-columns: repeat(24, 60px);
    grid-template-rows: repeat(28, 30px);
    width: 100%;
    height: 100%;
    grid-gap: 0px;
    background-color: white;
    z-index: 10;
    //position: absolute;
}

.grid-cell {
    width: 60px;
    height: 30px;
    background-color: white;
    margin: 0;
    padding: 0;
    //border-radius:30%;
    position: relative;
    // opacity: 0.5;
    // z-index: 12; 
}

.container {
    //position: relative;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    //animation: blink 2s infinite;
}

@keyframes blink {

    /* 从0%（完全不透明）到100%（完全透明），然后再回到0% */
    0%,
    100% {
        opacity: 1;
    }

    50% {
        opacity: 0.8;
    }
}

.legend {
    width: 12px;
    /* 圆点的宽度 */
    height: 12px;
    /* 圆点的高度 */
    // border-radius: 50%;
    /* 将矩形元素转换为圆形 */
    display: inline-block;
}

.preparing-status-cell {
    background-color: burlywood;
    border: 1px solid black;
    z-index: 16;
    /* 提高 z-index 值 */
    position: relative;
}

.request-loading-status-cell {
    background-color: blue;
    border: 1px solid black;
    z-index: 16;
    /* 提高 z-index 值 */
    position: relative;
}

.processing-status-cell {
    background-color: green;
    border: 1px solid black;
    z-index: 16;
    /* 提高 z-index 值 */
    position: relative;
}

.finished-status-cell {
    background-color: red;
    border: 1px solid black;
    z-index: 16;
    /* 提高 z-index 值 */
    position: relative;
}

.station-font {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    height: 70%;
    color: white;
    font-size: 10px;
    font-weight: bold;
}

.coordinates-display {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 5px;
    background-color: white;
    color: black;
    border-radius: 5px;
    z-index: 50;
}

.pathStyle {
    position: absolute;
    z-index: 25;
    pointer-events: none;
    top: 0;
    left: 0;
}

body {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    background-color: #f0f0f0;
}

.path {
    position: absolute;
    pointer-events: none;
    width: 1440px;
    height: 840px;
    z-index: 25;
    top: 0;
}

.arrow {
    fill: lightgray;
    width: 40px;
    height: 40px;
    animation: moveAlongPath 4s linear infinite alternate;
    z-index: 25;
    // border: black 1px solid;
}

@keyframes moveAlongPath {
    0% {
        offset-distance: 0%;
    }
    100% {
        offset-distance: 100%;
    }
}
</style>
如何用Lottie实现复杂的SVG路径动画？
AI架构全栈开发实战笔记
06-07 1432
我们的目的是让大家学会利用Lottie这个强大的工具来创建复杂的SVG路径动画。范围涵盖了从基础概念的理解到实际项目的开发，包括设计、编码和调试等各个环节。本文首先会介绍Lottie和SVG路径动画的核心概念，然后讲解它们之间的联系。接着会详细说明实现复杂SVG路径动画的算法原理和操作步骤，包括数学模型和公式。之后会给出项目实战的具体案例，分析实际应用场景。还会推荐一些有用的工具和资源，探讨未来的发展趋势和挑战。最后进行总结并提出思考题。Lottie。
svg动画 html,SVG 路径动画简易指南_SVG, SVG Animation, Animation, Web动画 教程_W3cplus
weixin_42136477的博客
06-07 808
任何有开发经验的前端工程师都会考虑到不成体系的设备生态所带来的挑战。设备间不同的屏幕尺寸、分辨率和比例使得产品难以提供一致的体验，对于那些对产品有着像素级完美追求的人这种体验差异尤其显著！SVG(可缩放的矢量图形)完美地解决了上文中提到的部分问题。尽管 SVG 有它的局限性，但是在某些场景下是非常有用的，如果你有一个好的设计团队，你也可以基于SVG创建一些震撼的视觉体验，而不必担心给浏览器带来过重...
HTML5(八)——SVG 之 path 详解
前端人的博客
08-09 6006
path 是 SVG 基本形状中最强大的一个，不仅可以实现我们上一篇《HTML5(七)——SVG基础入门》中，介绍的 SVG 预定义的 line、rect、circle、ellipse、line、polyline、polygon 六种基本形状。还可以实现更复杂的效果，我们就开始学习 path 如何应用。 一、path 路径详解 1.1、path 命令 path 用于定义一个路径，其中命令就是控制这条路径的，以下命令就是可用于路径数据： 注：以上所有命令大小写都可以，区别是大写命令表示绝对定位
html的svg路径,SVG Path（路径）
weixin_30010987的博客
06-16 998
SVG Path(路径)元素是用来画一条闭合直线。语法下面是的语法声明，这里只介绍主要的属性。d="data" >属性S.N. 名称和描述1 d - 路径数据，通常是一组命令，例如moveto、lineto等。元素被用来定义任何路径。Path元素使用Path数据，这些数据包含很多命令，这些命令就好像是拿着一支笔在移动画出一条路径。S.N. ...
HTML svg 之＜path＞使用
Thea12138的博客
04-12 3326
path> 元素用于定义一个路径。
html的svg路径,SVG Path路径在网页开发的作用
weixin_39777213的博客
06-16 470
原标题：SVG Path路径在网页开发的作用作者：会编程的银猪www.yinchengli.com/2018/06/17/svg-path/SVG是矢量图形表示，它的一个强大之处在于path标签可以表示任意的矢量形状，利用好这个path可以做出很多传统html/css做不出来的效果。下面举几个例子。1. 做路径动画这个我在《SVG导航下划线光标跟随效果》文后补充介绍了这个实现，最后的效果是这样的：...
SVG之Path
u598975767的专栏
05-11 1965
SVG之Path 目录   一、Path概述    　　1、控制命令    　　2、格式    　　3、简单的演示编辑器  二、移动和直线命令  三、弧线命令  四、贝塞尔曲线命令    　　1、贝塞尔曲线概述    　　2、二次贝塞尔曲线命令：Q    　　3、三次贝塞尔曲线命令：C    　　4、光滑贝塞尔曲线    　　5、知识回顾与拓展思考 一、Path概述 　　1、控制命令 　　SVG提供了一些基础图形元素标签如<circle>、<rect>、<e.
3D旋转SVG路径动画特效代码.zip
11-03
今天，我们提到的“3D旋转SVG路径动画特效代码.zip”是一个压缩包文件，它包含了一系列精心设计的代码文件。这些文件共同构成了一个实现SVG路径动画特效的项目，特别之处在于它通过编码实现了3D旋转效果。这种效果...
一个封装了vivus的vue组件能够播放svg路径动画
08-12
在这个场景中，我们讨论的是一个基于Vue.js的自定义组件，它整合了Vivus库，用于播放SVG路径动画。Vivus是一个轻量级的JavaScript库，能够使静态的SVG图形动起来，通过动态地绘制SVG路径来实现各种动画效果。 首先...
Svg路径动画特效代码.rar
10-01
SVG路径动画主要涉及到以下几个关键知识点： 1. **SVG基本概念**：SVG是一种基于XML的二维矢量图像格式，可以描述点、线、形状等元素，并支持渐变、透明度、滤镜等特性。由于SVG是文本格式，所以可以被搜索引擎抓取...
svg之path
涛哥~梦
01-02 736
添加链接描述
html的svg路径,svg path路径的介绍已经使用，看完就能灵活使用svg path路径
weixin_31655087的博客
06-16 1494
svg path的指令path的指令有：M = moveto(X,Y) ：将画笔移动到指定的坐标位置L = lineto(X,Y) ：画直线到指定的坐标位置H = horizontal lineto(X)：画水平线到指定的X坐标位置V = vertical lineto(Y)：画垂直线到指定的Y坐标位置C = curveto(X1,Y1,X2,Y2,ENDX,ENDY)：三次次贝赛曲线S = sm...
HTML5(八)——SVG 之 path 详解，想转行当程序员的必看
03-30 1489
=就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。其实此题并没有太多刁钻匪夷所思的用法，都是一些可能会遇到的场景，而大多数人但凡有1年到2年的工作经验都应该完全正确才对。只能说有一些人太急躁太轻视了，希望大家通过此文了解js一些特性。==就答题情况而言，第一问100%都可以回答正确，第二问大概只有50%正确率，第三问能回答正确的就不多了，第四问再正确就非常非常少了。
HTML5(八)——SVG 之 path 详解，作为前端程序员都应掌握
2401_83977580的博客
04-04 2272
大厂面试问深度，小厂面试问广度，如果有同学想进大厂深造一定要有一个方向精通的惊艳到面试官，还要平时遇到问题后思考一下问题的本质，找方法解决是一个方面，看到问题本质是另一个方面。还有大家一定要有目标，我在很久之前就想着以后一定要去大厂，然后默默努力，每天看一些大佬们的文章，总是觉得只有再学深入一点才有机会，所以才有恒心一直学下去。一个人可以走的很快，但一群人才能走的更远。如果你从事以下工作或对以下感兴趣，欢迎戳这里加入程序员的圈子，让我们一起学习成长！
SVGPath动画的实现与应用：Web和JavaFX结合
最新发布
weixin_28721743的博客
05-24 629
SVGPath是SVG中的一种路径元素，它能够用来绘制复杂的图形。SVGPath由一系列命令和参数构成，每个命令指定一种特定的路径动作（如移动、绘制线条、绘制曲线等），而参数则定义了命令的具体行为。通过组合不同的命令，SVGPath可以创建出直线、圆形、弧形、贝塞尔曲线等各种图形。SVGPath元素定义了一个路径，而路径则是通过一系列命令和参数组合来绘制的。SVGPath命令可以分为两大类：移动命令和绘制命令。移动命令用于移动路径的起始点，而绘制命令则用来绘制直线、曲线等。
html:svg path的使用及问题的解决（绘制图片）
weixin_43850949的博客
10-21 1601
** 1.svg的使用 ** svg在线编辑器 （如下链接） https://www.nhooo.com/svg-editor/ 使用方式： 1.调整画布，以及绘制图形（如图：） 2.点击菜单栏的查看源代码：复制其中的path属性 3.将复制的path标签复制到所需的svg中（如图：） 其中viewbox为裁剪框 例：viewbox=“x y width height” 即只显示（x,y）~（x+width,y+height）这个区间的图形 例：viewbox=“12 12 12 12” 即只显示（12
SVG`path`语法：图解指南
CSS 初学者指南
06-27 1709
SVG中的<path>元素是最终的绘制元素。 它可以画任何东西！ 我听说在引擎盖下所有其他绘图元素最终都会使用路径。 path元素采用单个属性来描述其绘制内容： d属性。 它具有的值本身就是一个迷你语法。 它看起来很难理解。 大量的数字和字母被拼成一条长字符串。 像其他任何计算机一样，押韵是有原因的。 我不是专家，但我认为深入研究会很有趣。 这是中等复杂性路径的一个例子，我会...
HTML5 中SVG属性path实现动态绘制圆形进度条效果
weixin_42794365的博客
01-18 2384
使用svg 绘制动态进度环，这里使用svg 中的path实现效果，和定时器制作动态环加载 效果如下： 代码如下： &lt;!DOCTYPE html&gt; &lt;html lang="en"&gt; &lt;head&gt;     &lt;meta charset="UTF-8"&gt;     &lt;title&gt;HTML5 中SVG属性path实现动态绘制圆形进度
3D旋转与SVG路径动画技术实现
从压缩包内文件名“3D旋转+SVG路径动画”来看，该项目很可能是一个完整的前端演示工程，包含HTML结构文件、CSS样式表、JavaScript脚本以及对应的SVG资源文件。其内部实现可能包括：使用JavaScript计算SVG路径的总...
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值