svg canvers

SVG Canvas实现组态

原创已于 2025-06-19 09:40:11 修改 · 165 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#html5

于 2025-06-03 08:52:12 首次发布

属性介绍

SVG手册
style属性用来定义CSS属性
CSS的fill属性定义矩形的填充颜色（rgb值，颜色名或者十六进制值）
CSS的stroke-width属性定义矩形边框的宽度
CSS的stroke属性定义矩形边框的颜色
X属性定义矩形的左侧位置
Y属性定义矩形的顶端位置
CSS的fill-opacity属性定义填充颜色的透明度
CSS的stroke-opacity属性定义笔触颜色透明度
CSS的opacity属性定义整个元素的透明值
rx和ry属性可使矩形产生圆角
圆形
cx和cy属性定义原点的X和Y坐标。如果省略CX和CY，圆的中心会被设置为（0,0）
r属性定义圆的半径
椭圆
cx属性定义圆点的X坐标
cy属性定义圆点的Y坐标
rx属性定义水平半径
ry属性定义垂直半径
线
x1属性在X轴定义线条的开始
y1属性在Y轴定义线条的开始
x2属性在X轴定义线条的结束
y2属性在Y轴定义线条的结束
折线
points属性定义多边形每个角的X和Y的坐标
多边形
路径
M = moveto 移至
l = lineto 画连接线
h = horizontal lineto 水平线
v = vertical lineto 垂直线
c = curveto 弧线
s = smooth curveto 光滑的弧线
q = quadratic belzier curve 二次Belzier曲线
t = smooth quadratic Belzier curveto 光滑的二次Belzier曲线
a = elliptical arc 椭圆的
z = closepath 闭合线
注释：以上所有命令均允许小写字母。大写表示绝对定位，小写表示相对定位。

SVG组态水管流动系统

<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>SVG组态水管流动效果</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            background-color: #f0f0f0;
            margin: 0;
            padding: 20px;
            display: flex;
            flex-direction: column;
            align-items: center;
        }
        .container {
            background-color: white;
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1);
            padding: 20px;
            margin-bottom: 20px;
            width: 90%;
            max-width: 900px;
        }
        h1 {
            color: #2c3e50;
            text-align: center;
        }
        .controls {
            display: flex;
            justify-content: center;
            gap: 10px;
            margin-bottom: 20px;
            flex-wrap: wrap;
        }
        button {
            padding: 8px 15px;
            background-color: #3498db;
            color: white;
            border: none;
            border-radius: 4px;
            cursor: pointer;
            transition: background-color 0.3s;
        }
        button:hover {
            background-color: #2980b9;
        }
        .pipe-system {
            width: 100%;
            height: auto;
            border: 1px solid #ddd;
            border-radius: 4px;
            background-color: #f9f9f9;
        }
    </style>
</head>
<body>
    <div class="container">
        <h1>SVG组态水管流动系统</h1>
        <div class="controls">
            <button onclick="startAllAnimations()">启动所有水流</button>
            <button onclick="stopAllAnimations()">停止所有水流</button>
            <button onclick="changeFlowSpeed(0.5)">慢速流动</button>
            <button onclick="changeFlowSpeed(1)">正常速度</button>
            <button onclick="changeFlowSpeed(2)">快速流动</button>
        </div>
        
        <svg class="pipe-system" viewBox="0 0 800 500" xmlns="http://www.w3.org/2000/svg">
            <defs>
                <!-- 定义水流渐变 -->
                <linearGradient id="waterGradient" x1="0%" y1="0%" x2="100%" y2="0%">
                    <stop offset="0%" stop-color="#3498db"/>
                    <stop offset="100%" stop-color="#2980b9"/>
                </linearGradient>
                
                <!-- 定义箭头标记 -->
                <marker id="arrowhead" markerWidth="10" markerHeight="7" 
                        refX="9" refY="3.5" orient="auto">
                    <polygon points="0 0, 10 3.5, 0 7" fill="#e74c3c"/>
                </marker>
            </defs>
            
            <!-- 主供水管道 -->
            <path id="mainSupply" d="M100,100 V300 H700" 
                  fill="none" 
                  stroke="#7f8c8d" 
                  stroke-width="20" 
                  stroke-linecap="round"
                  marker-end="url(#arrowhead)"/>
            
            <!-- 分支管道1 -->
            <path id="branch1" d="M300,100 V200 H500 V250" 
                  fill="none" 
                  stroke="#95a5a6" 
                  stroke-width="15" 
                  stroke-linecap="round"/>
            
            <!-- 分支管道2 -->
            <path id="branch2" d="M500,300 V400 H200 V450" 
                  fill="none" 
                  stroke="#95a5a6" 
                  stroke-width="15" 
                  stroke-linecap="round"/>
            
            <!-- 主供水流动效果 -->
            <path class="water-flow" d="M100,100 V300 H700" 
                  fill="none" 
                  stroke="url(#waterGradient)" 
                  stroke-width="12" 
                  stroke-linecap="round"
                  stroke-dasharray="20,10"
                  stroke-dashoffset="0">
                <animate attributeName="stroke-dashoffset" 
                         values="0;30" 
                         dur="2s" 
                         repeatCount="indefinite"
                         begin="indefinite"/>
            </path>
            
            <!-- 分支1流动效果 -->
            <path class="water-flow" d="M300,100 V200 H500 V250" 
                  fill="none" 
                  stroke="url(#waterGradient)" 
                  stroke-width="10" 
                  stroke-linecap="round"
                  stroke-dasharray="15,10"
                  stroke-dashoffset="0">
                <animate attributeName="stroke-dashoffset" 
                         values="0;25" 
                         dur="1.5s" 
                         repeatCount="indefinite"
                         begin="indefinite"/>
            </path>
            
            <!-- 分支2流动效果 -->
            <path class="water-flow" d="M500,300 V400 H200 V450" 
                  fill="none" 
                  stroke="url(#waterGradient)" 
                  stroke-width="10" 
                  stroke-linecap="round"
                  stroke-dasharray="15,10"
                  stroke-dashoffset="0">
                <animate attributeName="stroke-dashoffset" 
                         values="0;25" 
                         dur="1.8s" 
                         repeatCount="indefinite"
                         begin="indefinite"/>
            </path>
            
            <!-- 流动小球1 -->
            <circle class="water-ball" r="6" fill="#e74c3c">
                <animateMotion dur="5s" repeatCount="indefinite" begin="indefinite">
                    <mpath href="#mainSupply"/>
                </animateMotion>
            </circle>
            
            <!-- 流动小球2 -->
            <circle class="water-ball" r="5" fill="#e74c3c">
                <animateMotion dur="4s" repeatCount="indefinite" begin="indefinite">
                    <mpath href="#branch1"/>
                </animateMotion>
            </circle>
            
            <!-- 流动小球3 -->
            <circle class="water-ball" r="5" fill="#e74c3c">
                <animateMotion dur="4.5s" repeatCount="indefinite" begin="indefinite">
                    <mpath href="#branch2"/>
                </animateMotion>
            </circle>
            
            <!-- 阀门和控制点 -->
            <circle cx="300" cy="100" r="10" fill="#e74c3c" onclick="toggleValve(this)" style="cursor: pointer;"/>
            <circle cx="500" cy="300" r="10" fill="#e74c3c" onclick="toggleValve(this)" style="cursor: pointer;"/>
            
            <!-- 添加文字标签 -->
            <text x="100" y="80" font-size="14" fill="#2c3e50">主供水管道</text>
            <text x="300" y="80" font-size="12" fill="#2c3e50">分支1阀门</text>
            <text x="500" y="280" font-size="12" fill="#2c3e50">分支2阀门</text>
            <text x="500" y="150" font-size="12" fill="#2c3e50">分支管道1</text>
            <text x="200" y="430" font-size="12" fill="#2c3e50">分支管道2</text>
        </svg>
    </div>

    <script>
        // 启动所有动画
        function startAllAnimations() {
            document.querySelectorAll('animate, animateMotion').forEach(anim => {
                anim.beginElement();
            });
        }
        
        // 停止所有动画
        function stopAllAnimations() {
            document.querySelectorAll('animate, animateMotion').forEach(anim => {
                anim.setAttribute('begin', 'indefinite');
            });
        }
        
        // 改变流动速度
        function changeFlowSpeed(speedFactor) {
            document.querySelectorAll('animate').forEach(anim => {
                const baseDur = parseFloat(anim.getAttribute('dur'));
                anim.setAttribute('dur', (baseDur / speedFactor) + 's');
            });
            
            document.querySelectorAll('animateMotion').forEach(anim => {
                const baseDur = parseFloat(anim.getAttribute('dur'));
                anim.setAttribute('dur', (baseDur / speedFactor) + 's');
            });
        }
        
        // 切换阀门状态
        function toggleValve(valve) {
            const isOpen = valve.getAttribute('fill') === '#2ecc71';
            valve.setAttribute('fill', isOpen ? '#e74c3c' : '#2ecc71');
            
            // 这里可以添加更复杂的逻辑来控制特定管道的流动
            const valveId = valve.getAttribute('cx') + '-' + valve.getAttribute('cy');
            console.log('阀门状态切换:', valveId, isOpen ? '关闭' : '打开');
        }
        
        // 初始化启动主管道动画
        window.onload = function() {
            document.querySelector('#mainSupply + .water-flow animate').beginElement();
            document.querySelector('.water-ball animateMotion').beginElement();
        };
    </script>
</body>
</html>