SVG 入门指北（三）

2023-09-12 01:46:27

SVG 入门指北（一）：简介、特点、浏览器支持情况、数值单位
SVG 入门指北（二）：理解画布、视窗、视野
SVG 入门指北（三）：矩形、圆形、椭圆
SVG 入门指北（四）：线条、多边形、多线条、文本、路径

SVG 矩形 - rect

参数	说明
width	矩形宽度
height	矩形高度
x	矩形左侧位置
y	矩形顶部位置
opacity	矩形整体不透明度（0 ～ 1）
fill	矩形的填充色
fill-opacity	填充色不透明度（0 ～ 1）
stroke	边框颜色
stroke-width	矩形边框宽度
stroke-opacity	边框颜色不透明度（0 ～ 1）
rx	矩形 x 轴方向圆角半径长度(最大值为宽度一半)
ry	矩形 y 轴方向圆角半径长度(长度相同可简写为其中任意一个)

<svg width="100" height="100">
  <rect
    width="80"
    height="80"
    x='10'
    y="10"
    fill="yellow"
    fill-opacity=".4"
    stroke-width="5"
    stroke="green"
    stroke-opacity=".8"
    rx="20"
    ry="10"
  />
</svg>

SVG 圆形 - circle

参数	说明
cx	圆心 x 轴坐标，默认 0
cy	圆心 y 轴坐标，默认 0
r	圆的半径
opacity	圆形整体不透明度（0 ～ 1）
fill	圆形的填充色
fill-opacity	填充色不透明度（0 ～ 1）
stroke	边框颜色
stroke-width	矩形边框宽度
stroke-opacity	边框颜色不透明度（0 ～ 1）

<svg width="100" height="100">
  <circle
    cx='50'
    cy="50"
    r="40"
    fill="yellow"
    fill-opacity=".4"
    stroke-width="5"
    stroke="green"
    stroke-opacity=".8"
  />
</svg>

SVG 椭圆 - ellipse

参数	说明
cx	圆心 x 轴坐标，默认 0
cy	圆心 y 轴坐标，默认 0
rx	圆的水平半径
ry	圆的垂直半径
opacity	圆形整体不透明度（0 ～ 1）
fill	圆形的填充色
fill-opacity	填充色不透明度（0 ～ 1）
stroke	边框颜色
stroke-width	矩形边框宽度
stroke-opacity	边框颜色不透明度（0 ～ 1）

<svg width="100" height="100">
  <ellipse
    cx='50'
    cy="50"
    rx="40"
    ry="20"
    fill="yellow"
    stroke-width="5"
    stroke="green"
    opacity=".7" />
</svg>

Html SVG

如有帮助，点赞鼓励一下吧！

一键登录