svg预定义元素

• 矩形 rect
• 圆形 circle
• 椭圆 ellipse
• 线 line
• 折线 polyline
• 多边形 polygon
• 路径 path

填充图形规则 fill-rule

nonzero | evenodd | inherit

实例

<svg>
  <rect width="300" height="100"
  style="fill:rgb(0,0,255);stroke-width:1;stroke:rgb(0,0,0)"/>
</svg>

SVG 矩形rect

• width 和 height 属性可定义矩形的宽度和高度
• style 属性用来定义 CSS 属性
• CSS 的 fill 属性定义矩形的填充颜色（rgb 值、颜色名或者十六进制值）
• CSS 的 stroke-width 属性定义矩形边框的宽度
• CSS 的 stroke 属性定义矩形边框的颜色
• x 属性定义矩形的左侧位置（例如，x="0" 定义矩形到浏览器窗口左侧的距离是 0px）
• y 属性定义矩形的顶端位置（例如，y="0" 定义矩形到浏览器窗口顶端的距离是 0px）
• CSS 的 fill-opacity 属性定义填充颜色透明度（合法的范围是：0-1）
• CSS 的 stroke-opacity 属性定义轮廓颜色的透明度（合法的范围是：0 - 1）
• CSS opacity 属性用于定义了元素的透明值 (范围: 0 到 1)。

SVG 圆 circle

• rx 和 ry 属性可使矩形产生圆角。
• cx 和 cy属性定义圆点的 x 和 y 坐标。如果省略 cx 和 cy，圆的中心会被设置为(0, 0)
• r 属性定义圆的半径

SVG 椭圆 ellipse

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

SVG 直线 line

• x1 属性在 x 轴定义线条的开始
• y1 属性在 y 轴定义线条的开始
• x2 属性在 x 轴定义线条的结束
• y2 属性在 y 轴定义线条的结束

SVG 多边形 polygon

polygon 标签用来创建含有不少于三个边的图形。

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

  <svg  height="210" width="500">
  <polygon points="200,10 250,190 160,210"
  style="fill:lime;stroke:purple;stroke-width:1"/>
  </svg>
  

SVG 多线段 polyline

polyline 元素是用于创建任何只有直线的形状

<svg>
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style="fill:none;stroke:black;stroke-width:3" />
</svg>

SVG 路径 path

path的路劲是通过d实现的 大写表示绝对定位，小写表示相对定位。

• 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

SVG 文本 text

text 元素用于定义文本。

Stroke 属性

• stroke: 定义一条线，文本或元素轮廓颜色
• stroke-width: 定义了一条线，文本或元素轮廓厚度
• stroke-linecap: 定义不同类型的开放路径的终结
• stroke-dasharray: 用于创建虚线
• 所有stroke属性，可应用于任何种类的线条，文字和元素就像一个圆的轮廓。