SVG组织结构图 [英] SVG organizational chart

问题描述

我是svg的新手。我想使用svg绘制组织结构图。我有一个表格，通过它可以生成这个聊天。

 ID User Supervisor_ID 
 1 CEO 
 2 Director营销1 
 3董事生产1 
 4经理营销2 
 5经理生产3 
 6协助。经理营销4 
 7助手。经理生产5 
 8销售执行6 
 9工程7 
 10工程7 

我应该感谢你的帮助。



感激，

Usama Javed

解决方案

请看我对这个问题的评论。



我想建议你学习SVG的好工具。您可以使用Inkscape绘制图形，然后学习SGV文本以查看图形的实现方式：

http ：//en.wikipedia.org/wiki/Inkscape [ ^ ]，

http://www.inkscape.org/ [ ^ ]。



此外，这个编辑器在方便性和性能方面以及文档方面都很棒。



参见：

http://en.wikipedia.org/wiki/Scalable_Vector_Graphics [ ^ ]，

http：// www .w3.org / Graphics / SVG / [ ^ ]，

http ：//www.w3.org/Graphics/SVG/IG/resources/svgprimer.html [ ^ ]，

http：// www.svgelves.com/ [ ^ ]。



一些教程：

http：//www.w3schools。 com / svg / [ ^ ]，

https://developer.mozilla.org/en-US/docs/SVG/Tutorial [ ^ ]，

http://tutorials.jenkov.com/svg/index.html [ ^ ]。

-SA

尝试在github上查看我的解决方案： OrgChart.svg 图表在SVG中完全呈现。支持tip-opver / stacking策略，这可能是创建良好组织结构图的最着名的解决方案。如果能帮到某人，我会很高兴。它基于snap.svg。



示例功能：

- 使用自己的SVG片段进行自定义样式设计，例如：在Adobe Illustrator中

- 翻转/堆叠以处理一个级别的大量节点

- 它是开源的，你可以在任何项目中免费使用它！ / BLOCKQUOTE>

Hi,
I am new with svg. I want to draw an organizational chart using svg. I have table through which this chat will be generated.

ID           User                       Supervisor_ID
1            CEO
2        Director Marketing                 1
3        Director Production 1
4        Manager Marketing 2
5        Manager Production 3
6        Assist. Manager Marketing 4
7        Assist. Manager Production 5
8        Sales Exec 6
9        Engr 7 
10       Engr 7

I Shall be thankful for you help.

Thankful,
Usama Javed

解决方案

Please see my comment to the question.

I would like to advise you one good tool to learn SVG. You can draw your graphics using Inkscape and then learn the SGV text to see how your graphic is implemented:
http://en.wikipedia.org/wiki/Inkscape[^],
http://www.inkscape.org/[^].

Besides, this editor is wonderful in convenience and performance, and also in its documentation.

See also:
http://en.wikipedia.org/wiki/Scalable_Vector_Graphics[^],
http://www.w3.org/Graphics/SVG/[^],
http://www.w3.org/Graphics/SVG/IG/resources/svgprimer.html[^],
http://www.svgelves.com/[^].

Some tutorials:
http://www.w3schools.com/svg/[^],
https://developer.mozilla.org/en-US/docs/SVG/Tutorial[^],
http://tutorials.jenkov.com/svg/index.html[^].

—SA

Try to check out my solution on github: OrgChart.svg The chart is fully rendered in SVG. Supports tip-opver / stacking strategy which is probably the best known solution to create good organisational charts. I would be very happy if it helps someone. It is based on snap.svg.

Example features:
- custom styling using own SVG fragments designed e.g. in Adobe Illustrator
- tip-over / stacking to handle huge amount of nodes in one level
- it's open source, you can use it for free in any project!

这篇关于SVG组织结构图的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！