属性介绍
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>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
