SVG格式实现UML流程图的节点样式

最新推荐文章于 2024-03-09 10:48:46 发布

沐晨潇雨

最新推荐文章于 2024-03-09 10:48:46 发布

阅读量343

点赞数

分类专栏：前端爬坑

本文链接：https://blog.csdn.net/u011008832/article/details/113511822

版权

前端爬坑专栏收录该内容

3 篇文章 0 订阅

订阅专栏

文章目录

前言
实现目标的样式
实现效果
总结

前言

使用SVG格式的内容生成viso节点的样式(纯手写，纯原创)

所有内容比较简单，以供大家参考

实现目标的样式

viso样式

实现效果

在这里插入图片描述

#源码展示

<!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>

总结

对于复杂的图形建议使用SVG编辑器，保存后使用。svg标签和html默认标签的区别不大，也可以进行html节点的基本操作。

沐晨潇雨

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
SVG格式实现UML流程图的节点样式

文章目录前言实现目标的样式实现效果总结前言使用SVG格式的内容生成viso节点的样式(纯手写，纯原创)所有内容比较简单，以供大家参考实现目标的样式实现效果#源码展示<!DOCTYPE html><html><style type="text/css"> .C3{ fill:none; stroke-width:1; stroke:rgb(0,0,0) } .C3:hover{ fill:none; stroke-width
复制链接

扫一扫