SVG 图标菜单


<!DOCTYPE html>
<html>
<style type="text/css">
	.C3{
		fill:none;
		stroke-width:1;
		stroke:rgb(0,0,0)
	}
	.C3:hover{
		fill:none;
		stroke-width:2;
		stroke:rgb(255,0,0)
	}
</style>
<body>

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" style="height:500px">
	<text x="45" y="15" fill="black">流程</text>
	<rect x="0" y="0" width="40" height="20"
  style="fill:rgb(20,162,227);stroke-width:1;stroke:rgb(255,255,255)"/>
  
  <text x="45" y="45" fill="black">判定</text>
  <path d="M20 30 L0 40 L20 50 L40 40Z" style="fill:rgb(217,0,116);stroke-width:1;stroke:rgb(255,255,255)" />
  
  <text x="45" y="75" fill="black">子流程</text>
  <rect x="0" y="60" width="40" height="20"
  style="fill:rgb(47,154,48);stroke-width:1;stroke:rgb(255,255,255)"/>
  <line x1="4" y1="60" x2="4" y2="80"
  style="stroke:rgb(255,255,255);stroke-width:1"/>
  <line x1="36" y1="60" x2="36" y2="80"
  style="stroke:rgb(255,255,255);stroke-width:1"/>
  
  <text x="45" y="105" fill="black">开始/结束</text>
  <path d="M10 90 A5 5 0 0 0 10 110 L30 110 A5 5 0 0 0 30 90 L10 90Z" style="fill:rgb(217,0,116);stroke-width:1;stroke:rgb(255,255,255)" />
  
  <text x="45" y="135" fill="black">数据</text>
  <path d="M10 120 L40 120 L30 140 L0 140Z" style="fill:rgb(240,151,2);stroke-width:1;stroke:rgb(255,255,255)" />
  
  
  <text x="45" y="165" fill="black">文档</text>
  <path d="M1 170 L0 150 L40 150 L40 170 A15 15 0 0 0 20 170 A15 15 0 0 1 0 170Z"
  style="fill:rgb(47,154,48);stroke-width:1;stroke:rgb(255,255,255)" />
  
  <text x="45" y="195" fill="black">连线</text>
   <line x1="0" y1="190" x2="40" y2="190" class="C3"/>
   <line x1="40" y1="190" x2="30" y2="180" class="C3"/>
	<line x1="40" y1="190" x2="30" y2="200" class="C3"/>
  <text x="45" y="215" fill="black">曲线</text>
  <path d="M0,220,Q20,200,40,220" class="C3"/>
  <path d="M0,240,C10,230,20,250,40,240"  class="C3"/>
  
  
  <path d="M0,270,C20,265,20,305,40,300" class="C3"/>
  <line x1="40" y1="300" x2="35" y2="295" class="C3"/>
  <line x1="40" y1="300" x2="35" y2="305" class="C3"/>
  
	
</svg> 
	
</body>
</html>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值