重要需掌握,画线,矩形、圆
画线:<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=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="14" fill="black">传统医学疾病{{ index }}</text>
<text x="420" y="41" font-family=""Helvetica Neue",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=""Helvetica Neue",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=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="14" fill="black">脏腑系统疾病</text>
<text x="420" y="171" font-family=""Helvetica Neue",Helvetica,Arial,sans-serif" font-size="12" fill="black">ID:313309</text>
</svg>
后续还会补充动态获取数据