前端用JS + SVG 实现关系图谱 流程图

重要需掌握，画线，矩形、圆

画线：<line x1="521" y1="108" x2="521" y2="145" stroke="black" stroke-width="2" marker-start="url(#ClearTriangleL)">></line>

矩形：<rect x="408" y="8" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>

圆：<circle cx="520" cy="88" r="20" fill="white" stroke="black" stroke-width="2"></circle>

代码如下：

<svg  xmlns="http://www.w3.org/2000/svg"  width="100%" height="700">
                             <g>
                              <title>关系图</title>
                              <rect fill="#fff" id="canvas_background" height="791" width="1614" y="-1" x="-1"/>
                              <g display="none" overflow="visible" y="0" x="0" height="100%" width="100%" id="canvasGrid">
                               <rect fill="url(#gridpattern)" stroke-width="0" y="0" x="0" height="100%" width="100%" id="svg_21"/>
                              </g>
                             </g>
                             <g>
                                  <title>关系图谱实现</title>
                                  <!-- 定义形状 -->
                                  <defs id="SctDiagramsDefs">
                                      <!--黑实心剪头-->
                                    <marker id="BlackTriangle" refX="0" refY="10" markerWidth="8" markerHeight="6" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="black" stroke="black" stroke-width="2">
                                        <path d="M 0 0 L 20 10 L 0 20 z"></path>
                                    </marker>
                                    <!--实心剪头左方向-->
                                    <marker id="BlackTriangleL" refX="0" refY="10" markerWidth="8" markerHeight="6" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="black" stroke="black" stroke-width="2">
                                        <path d="M 0 10 L 20 0 L 20 20 z"></path>
                                    </marker>
                                    <!--空心剪头-->
                                    <marker id="ClearTriangle" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
                                        <path d="M 0 0 L 20 10 L 0 20 z"></path>
                                    </marker>
                                    <!--空心剪头左方向-->
                                    <marker id="ClearTriangleL" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
                                        <path d="M 0 10 L 20 0 L 20 20 z"></path>
                                    </marker>
                                    <!--线-->
                                    <marker id="LineMarker" refX="0" refY="10" markerWidth="8" markerHeight="8" orient="auto" viewBox="0 0 22 20" markerUnits="strokeWidth" fill="white" stroke="black" stroke-width="2">
                                        <path d="M 0 10 L 20 10">
                                        </path>
                                    </marker>
                                </defs>
                                <!-- 父级元素  -->
                                <a @click="zx()">
                                     <rect x="408" y="8" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>
                                    <rect x="410" y="10" width="250"  height="39" id="rect39" fill="#5470c6" stroke="#ccc" stroke-width="1" ></rect><!--v-for="(item,index) in list" :key="index"-->
                                    <text x="420" y="26" font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="14" fill="black">传统医学疾病{{ index }}</text>
                                    <text x="420" y="41" font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="12" fill="black">ID：313308</text>
                                    <line x1="521" y1="50" x2="521" y2="80" stroke="black" stroke-width="4"></line>
                                    <line x1="521" y1="108" x2="521" y2="145" stroke="black" stroke-width="2" marker-start="url(#ClearTriangleL)">></line>
                                    <circle cx="520" cy="88" r="20" fill="white" stroke="black" stroke-width="2"></circle>
                                    <text x="508" y="90" font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="12" fill="black">父级</text>
                                </a>
                                <!-- 当前元素 -->
                                <rect x="408" y="138" width="254" height="43" fill="white" stroke="#ccc" stroke-width="1"></rect>
                                <rect x="410" y="140" width="250"  height="39" id="rect39" fill="#91cb74" stroke="#ccc" stroke-width="1"></rect>
                                <text x="420" y="156" font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="14" fill="black">脏腑系统疾病</text>
                                <text x="420" y="171" font-family="&quot;Helvetica Neue&quot;,Helvetica,Arial,sans-serif" font-size="12" fill="black">ID：313309</text>

</svg>

 

后续还会补充动态获取数据