HTML SVG

SVG预定义形状

Rectangle Circle Ellipse Line Polyline Polygon Path

SVG在线编辑器: https://c.runoob.com/more/svgeditor/ SVG参考: https://www.w3schools.com/graphics/svg_reference.asp

rect:

<svg width="200" height="100">
  <rect width="30" height="80" 
  style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
  <rect x="33" y="0" width="50" height="80"
//x属性定义矩形的左侧位置
//y属性定义矩形的顶部位置
  style="fill:blue;stroke:pink;stroke-width:3;fill-opacity:0.1;stroke-opacity:0.9" />
//fill-opacity属性定义填充颜色的不透明度（法定范围：0到1）
//stroke-opacity属性定义笔画颜色的不透明度（法定范围：0到1）
  <rect x="86" y="0" width="10" height="80"
  style="fill:blue;stroke:pink;stroke-width:4;opacity:0.4" />
//opacity属性定义整个元素的不透明度值（法定范围：0到1）
  <rect x="100" y="0" rx="10" ry="10" width="95" height="80"
//rx和ry属性舍入矩形的角
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
  <rect x="0" y="80" width="200" height="17" 
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)" />
</svg>

circle:

<svg height="100" width="100">
  <circle cx="50" cy="50" r="40" stroke="black" stroke-width="3" fill="red" />
//cx和cy属性定义了圆心的x和y坐标.r属性定义圆的半径
</svg>

ellipse:

<svg height="400" width="400">
  <ellipse cx="200" cy="80" rx="100" ry="50"
//cx属性定义椭圆中心的x坐标
//cy属性定义椭圆中心的y坐标
//rx属性定义水平半径
//ry属性定义了垂直半径
  style="fill:yellow;stroke:purple;stroke-width:2" />
xmlns:xlink="https://xx.com">
<a xlink:href="https://xx.com" target="_blank">
<text x="50" y="105" fill="red"transform="rotate(30 20,40)">这里是line:</text>
  </a>
  <line x1="0" y1="160" x2="400" y2="160" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
//x1属性定义x轴上行的开始
//y1属性定义y轴上行的开始
//x2属性定义x轴上的行的末尾
//y2属性定义了y轴上行的末尾
  <ellipse cx="200" cy="300" rx="200" ry="30" 
  style="fill:purple" />
  <ellipse cx="180" cy="270" rx="170" ry="20" 
  style="fill:lime" />
  <ellipse cx="170" cy="245" rx="150" ry="15" 
  style="fill:yellow" />
  <line x1="400" y1="0" x2="400" y2="400" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="0" y1="0" x2="0" y2="400" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="0" y1="0" x2="400" y2="0" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
  <line x1="0" y1="400" x2="400" y2="400" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
</svg>

多边型:

<svg height="400" width="400">
  <polyline points="0,0 400,0 400,400 0,400 0,0 100,0 100,30 0,30"
  style="fill:none;stroke:red;stroke-width:4" />
  <text x="5" y="20" fill="red">画个五角星:</text>
  <polygon points="100,100 40,278 190,168 10,168 160,278"
  style="fill:lime;stroke:red;stroke-width:3;fill-rule:evenodd;" />
  <line x1="200" y1="0" x2="200" y2="400" 
  style="stroke:rgb(255,0,0);stroke-width:2" />
  <polygon points="300,100 240,278 390,168 210,168 360,278" 
  style="fill:lime;stroke:purple;stroke-width:1" />
</svg>