这是一篇基于svg绘制的思维导图用到的都是svg的一些知识点，如果你想学习使用svg绘制各种图案，这篇文章一定能帮助到你哦！
vue文件贴代码即可看见效果
详细知识内容可看注释
<template>
<div>
<svg
xmlns="http://www.w3.org/2000/svg"
width="100%"
height="700"
>
<g>
<!-- 圆形渐变色 -->
<defs>
<!--
1、<linearGradient>元素用于定义线性渐变。
2、<linearGradient>标签必须嵌套在<defs>的内部。
3、<linearGradient>标签的id属性可为渐变定义一个唯一的名称，通过id绑定到需要渐变的元素上
4、线性渐变可以定义为水平，垂直或角渐变：
当y1和y2相等，而x1和x2不同时，可创建水平渐变
当x1和x2相等，而y1和y2不同时，可创建垂直渐变
当x1和x2不同，且y1和y2不同时，可创建角形渐变
-->
<linearGradient
id="grad1"
x1="0%"
y1="0%"
x2="100%"
y2="0%"
>
<stop
offset="0%"
style="stop-color:#f06d6f;stop-opacity:1"
/>
<stop
offset="100%"
style="stop-color:#e03f40;stop-opacity:1"
/>
</linearGradient>
</defs>
<!-- 矩形渐变色 -->
<defs>
<linearGradient
id="grad2"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color:#f8dede;stop-opacity:1"
/>
<stop
offset="100%"
style="stop-color:#fefcfc;stop-opacity:1"
/>
</linearGradient>
</defs>
<!-- 边框渐变色 -->
<defs>
<linearGradient
id="grad3"
x1="0%"
y1="0%"
x2="0%"
y2="100%"
>
<stop
offset="0%"
style="stop-color:#efa2a2;stop-opacity:1"
/>
<stop
offset="100%"
style="stop-color:#fce7e7;stop-opacity:1"
/>
</linearGradient>
</defs>
</g>
<g>
<!-- cx和cy属性定义圆点的x和y坐标, r属性定义圆的半径 -->
<circle
cx="700"
cy="350"
r="56"
fill="url(#grad1)"
stroke-width="2"
></circle>
<!-- <text> 元素用于定义文本。 -->
<text
x="652"
y="350"
font-family=""
font-size="12"
fill="white"
>svg教程文本</text>
<text
x="679"
y="370"
font-family=""
font-size="12"
fill="white"
>内容内容</text>
</g>
<g>
<!-- <path> 元素用于定义一个路径。 -->
<path
d="M 740 311 q 40 -220 150 -200"
stroke="#f3b8b8"
stroke-width="2"
fill="none"
/>
<!-- 外边框 -->
<!-- 1、<rect> 标签可用来创建矩形，以及矩形的变种
rect 元素的 width 和 height 属性可定义矩形的高度和宽度
style 属性用来定义 CSS 属性
CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
CSS 的 stroke-width 属性定义矩形边框的宽度
CSS 的 stroke 属性定义矩形边框的颜色
-->
<rect
x="888"
y="91"
width="94"
height="38"
fill="url(#grad3)"
stroke-width="1"
></rect>
<!-- 内矩形 -->
<rect
x="890"
y="93"
width="90"
height="34"
id="grad2"
fill="url(#grad2)"
stroke-width="1"
></rect>
<text
x="900"
y="115"
font-family=""
font-size="12"
fill="black"
>内容内容内容</text>
</g>
<g>
<path
d="M 743 314 q 36 -120 145 -98"
stroke="#f3b8b8"
stroke-width="2"
fill="none"
/>
<!-- 外边框 -->
<rect
x="888"
y="200"
width="64"
height="38"
fill="url(#grad3)"
stroke-width="1"
></rect>
<!-- 内矩形 -->
<rect
x="890"
y="202"
width="60"
height="34"
id="grad2"
fill="url(#grad2)"
stroke-width="1"
></rect>
<text
x="900"
y="224"
font-family=""
font-size="12"
fill="black"
>内容11</text>
</g>
<g>
<path
d="M 756 350 q 55 10 132 -10"
stroke="#f3b8b8"
stroke-width="2"
fill="none"
/>
<!-- 外边框 -->
<rect
x="888"
y="320"
width="94"
height="38"
fill="url(#grad3)"
stroke-width="1"
></rect>
<!-- 内矩形 -->
<rect
x="890"
y="322"
width="90"
height="34"
id="grad2"
fill="url(#grad2)"
stroke-width="1"
></rect>
<text
x="900"
y="345"
font-family=""
font-size="12"
fill="black"
>内容内容内容</text>
</g>
</svg>
</div>
</template>
<script>
export default {
data () {
return {
}
}
}
</script>
<style lass="scss">
</style>
