SVG学习——2.SVG基本图形_HTML

以下内容都是直接在html文件的body里的

一、圆circle

<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <circle cx="100" cy="100" r="40" fill="transparent" stroke="black" stroke-width="5"></circle>
</svg>
</div>

注：
fill设置填充色：transparent或者none透明；
stroke设置轮廓色；
stroke-width设置轮廓粗细。
circle也可以这样写

<circle cx="100" cy="100" r="40" style="fill:yellow;stroke:red;stroke-width:15px;"></circle>

不过没必要

二、矩形rect

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <rect width="200" height="200" x="100" y="100" fill="red" rx="30" ry="50"></rect>
</svg>
</div>

注：rx ry只写一个时默认相等，用来确定圆角

三、线line

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <line x1="50" y1="50" x2="200" y2="300" stroke="red" stroke-width="10"  stroke-opacity="0.5" stroke-linecap="round" stroke-dasharray="5,5" ></line>
</svg>
</div>

注：x1，y1 确定起始点，x2，y2 确定终点，stroke确定线的颜色，stroke-width确定线的粗细，stroke-opacity确定不透明度（0-1的）
注：这里如果要用前面的transparent只能加给stroke不能给stroke-opacity
注：stroke-linecap="round"圆头，另有square和butt。stroke-dasharray="5,5"设置虚线，数字可以有多个。

四、椭圆ellipse

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <ellipse cx="100" cy="50" rx="40" ry="20" style="fill:rgb(200,100,50); stroke:rgb(0,0,100); stroke-width:2" />
</svg>
</div>

五、折线polyline

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polyline points="30,0 0,20 20,200 20,60 40,100 40,300" style="fill:white;stroke:red;stroke-width:2"/>
</svg>
</div>

也可以这样

<polyline points="50,50 200,300 230,200 200,50" fill="none" stroke="black" stroke-width="5"></polyline>

注：fill="none"可以让它不填充。points里的逗号=空格

六、多边形ploygon

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <polygon points="220,100 300,210 170,250 100,30" style="fill:#cccccc; stroke:#000000;stroke-width:1"/>
</svg>
</div>

也可以这样

<polygon points="50,50 200,300 230,200 200,50" fill="none" stroke="black" stroke-width="5"></polygon>

注：fill=“none”可以中间透明

七、路径path

<!--直接写svg的方法-->
<div id="div1">
<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
  <path d="M250 150 L150 350 L350 350 Z" />
</svg>
</div>

注：允许小写字母。大写表示绝对定位，小写表示相对定位。

请把下面的代码拷贝到记事本，然后把文件保存为 “path1.svg”。把此文件放入您的
M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Belzier curve
T = smooth quadratic Belzier curveto
A = elliptical Arc
Z = closepath

本文地址：https://blog.csdn.net/qq_31949641/article/details/107885372