SVG Chapter 1

资料来源 imooc 慕课网

1.1 位图 & 矢量图

SVG Chapter 1_第1张图片
Paste_Image.png
Paste_Image.png

1.2 基本图形

SVG Chapter 1_第2张图片
基本图形
rect
SVG Chapter 1_第3张图片
rect
circle
SVG Chapter 1_第4张图片
circle
ellipse
SVG Chapter 1_第5张图片
ellipse
line
SVG Chapter 1_第6张图片
line
polyline
SVG Chapter 1_第7张图片
polyline
polygon
SVG Chapter 1_第8张图片
polygon

The following commands are available for path data:
• M = move to
• L = line to
• H = horizontal line to
• V = vertical line to
• C = curve to
• S = smooth curve to
• Q = quadratic Bézier curve 二次贝塞尔曲线
• T = smooth quadratic Bézier curveto 光滑二次贝塞尔曲线
• A = elliptical Arc 椭圆弧
• Z = close path

填充 描边 和 变换
  • fill
  • stroke
  • stroke-width
  • transform

1.3 基本操作API

  • 创建图形:document.createElementNS(namespaceURI, qualifiedName[, options]);
    namespaceURI:string that specifies the namespace to associate with the element.
    qulifiedName:A string that specifies the type of element to be created > a nodeName
    optiond:A optional object ElementCreationOptions containing a single property named is, whose value is the tag name for a custom element previously defined using customElements.define().
    (创建之后记得用appendChild()添加)

  • 添加图形:document.appendChild(childElement)

  • 获取 / 设置:
    element.setAttribute(name, value)
    element.getAttribute(name)

1.4实例

你可能感兴趣的:(SVG Chapter 1)