SVG 绘制矩形

矩形

<svg width="300" height="130" xmlns="http://www.w3.org/2000/svg">
  <rect width="200" height="100" x="10" y="10" rx="20" ry="20" fill="blue" />
</svg>

带边框的矩形

<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
  <rect width="300" height="100" x="10" y="10" style="fill:rgb(0,0,255);stroke-width:3;stroke:red" />
</svg>

带透明度的矩形

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10"
  style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9" />
</svg>

带圆角的矩形

rx = 10, ry = 10

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="10" ry="10"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

rx = 10, ry = 30

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="10" ry="30"
  style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>

rx = 30, ry = 10

<svg width="300" height="170" xmlns="http://www.w3.org/2000/svg">
  <rect width="150" height="150" x="10" y="10" rx="30" ry="10"
        style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>