图形

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

Links

上一页

最近更新于0001-01-01