图形

SVG 图形

矩形

矩形的属性如下:

1.rect 元素的 width 和 height 属性可定义矩形的高度和宽度 2.style 属性用来定义 CSS 属性 3.CSS 的 fill 属性定义矩形的填充颜色(rgb 值、颜色名或者十六进制值) 4.CSS 的 stroke-width 属性定义矩形边框的宽度 5.CSS 的 stroke 属性定义矩形边框的颜色 6.x 属性定义矩形的左侧位置(例如,x=”0” 定义矩形到浏览器窗口左侧的距离是 0px) 7.y 属性定义矩形的顶端位置(例如,y=”0” 定义矩形到浏览器窗口顶端的距离是 0px) 8.CSS 的 fill-opacity 属性定义填充颜色透明度(合法的范围是:0 - 1) 9.CSS 的 stroke-opacity 属性定义笔触颜色的透明度(合法的范围是:0 - 1) 10.CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。 11.rx 和 ry 属性可使矩形产生圆角。

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

圆形

cx 和 cy 属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy,圆的中心会被设置为(0, 0),r 属性定义圆的半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

椭圆

CX 属性定义的椭圆中心的 x 坐标,CY 属性定义的椭圆中心的 y 坐标;RX 属性定义的水平半径,RY 属性定义的垂直半径。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple" />
<ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime" />
<ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow" />
</svg>

直线

直线的属性如下:

1.x1 属性在 x 轴定义线条的开始 2.y1 属性在 y 轴定义线条的开始 3.x2 属性在 x 轴定义线条的结束 4.y2 属性在 y 轴定义线条的结束

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<line
x1="0"
y1="0"
x2="200"
y2="200"
style="stroke:rgb(255,0,0);stroke-width:2"
/>
</svg>

多边形

points 属性定义多边形每个角的 x 和 y 坐标。

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
<polygon
points="200,10 250,190 160,210"
style="fill:lime;stroke:purple;stroke-width:1"
/>
</svg>

路径

所有命令均允许小写字母。大写表示绝对定位,小写表示相对定位。

M = moveto
L = lineto
H = horizontal lineto
V = vertical lineto
C = curveto
S = smooth curveto
Q = quadratic Bézier curve
T = smooth quadratic Bézier curveto
A = elliptical Arc
Z = closepath

链接