基本形状

line

链接两个点的线段

attributes - x1 y1 x2 y2

x1 起始点 x 轴坐标

y1 起始点 y 轴坐标

x2 起始点 x 轴坐标

y2 起始点 y 轴坐标

(x1, y1) -> (x2, y2)

rect

画出一个矩形

attributes - x y width height rx ry

(x, y) - 这个点是左上角的位置

width - 宽度

height - 高度

rx - 定义 x 方向圆角半径

ry - 定义 y 方向圆角半径

circle

画出一个圆形

attributes - cx cy r

(cx, cy) - 圆心位置

r - 圆半径

ellipse

画出一个椭圆

attributes - cx cy rx ry

(cx, cy) - 圆心位置

rx - x 方向的半径

ry - y 方向的半径

polyline

用来创建一系列直线连接多个点,不闭合

attributes - points

polygon

画出一组首尾相连的直线线段构成的闭合多边形形状,跟polyline 唯一的区别在于 polygon 闭合, 而 polyline 不闭合

attributes - points

examples:

<svg xmlns="http://www.w3.org/2000/svg" width="200" height="400">
    <line x1="0" x2="100" y1="10" y2="10" stroke="#3b5998" stroke-width="3" stroke-opacity="0.6" />
    <line x1="0" x2="100" y1="20" y2="20" stroke="red" stroke-width="3" />
    <rect x="50" y="60" width="100" height="100" fill="#3b5998" rx="40" ry="5"/>
      <circle cx="200" cy="50" r="10" fill="#3b5998" />
    <ellipse cx="300" cy="100" fill="#3b5998" rx="60" ry="20" />
    <polyline points="20,300 100,300 80,400 0,400" fill="none" stroke="#3b5998" stroke-width="3" />
    <polygon points="20,500 100,500 80,600 0,600" fill="#3b5998" />
</svg>

results matching ""

    No results matching ""