使用SVG 画一个流程图demo给我
时间: 2023-04-04 20:04:26 浏览: 263
svg 画流程图
3星 · 编辑精心推荐
好的,我可以为您展示一个简单的SVG流程图demo。请看下面的代码:
<svg width="400" height="300">
<rect x="50" y="50" width="100" height="50" fill="#f0f0f0" stroke="#000" stroke-width="2" />
<rect x="250" y="50" width="100" height="50" fill="#f0f0f0" stroke="#000" stroke-width="2" />
<rect x="150" y="150" width="100" height="50" fill="#f0f0f0" stroke="#000" stroke-width="2" />
<line x1="100" y1="75" x2="150" y2="150" stroke="#000" stroke-width="2" />
<line x1="200" y1="75" x2="150" y2="150" stroke="#000" stroke-width="2" />
<line x1="250" y1="75" x2="200" y2="150" stroke="#000" stroke-width="2" />
<line x1="150" y1="200" x2="150" y2="150" stroke="#000" stroke-width="2" />
<text x="75" y="75" font-size="16">开始</text>
<text x="275" y="75" font-size="16">结束</text>
<text x="150" y="175" font-size="16">处理</text>
</svg>
这是一个简单的三步流程图,包括一个开始步骤、一个处理步骤和一个结束步骤。每个步骤都是一个矩形,连接它们的线条表示流程的顺序。我希望这个demo对您有所帮助。
阅读全文