SVG

形狀

  • <line> 線
  • <polyline> 折線
  • <polygon> 路徑
  • <rect> 矩形
  • <circle> 圓形
  • <ellipse> 橢圓

style

  • fill
  • fill-opacity
  • stroke
  • stroke-opacity
  • stroke-width
  • opacity

rect

  • width / heigth
  • x / y
  • rx / rx

circle

  • cx / cy
  • r

ellipse

  • cx / cy
  • rx / ry

line

  • x1 / y1
  • x2 / y2

polygon

  • points

polyline

  • points

path

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

濾鏡

  • feBlend
  • feColorMatrix
  • feComponentTransfer
  • feComposite
  • feConvolveMatrix
  • feDiffuseLighting
  • feDisplacementMap
  • feFlood
  • feGaussianBlur
  • feImage
  • feMerge
  • feMorphology
  • feOffset
  • feSpecularLighting
  • feTile
  • feTurbulence
  • feDistantLight
  • fePointLight
  • feSpotLight
最后編輯于 ：
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明：文章內容（如有圖片或視頻亦包括在內）由作者上傳并發布，文章內容僅代表作者本人觀點，簡書系信息發布平臺，僅提供信息存儲服務。

推薦閱讀更多精彩內容

  • 上個項目用到svg實現一個水流的動畫，鑒于沒學習幾天，所以懂的也不多，就此分享一下。首先svg是什么，svg可縮放...
    會飛的豬l閱讀 4,162評論 0贊 5
  • SVG有一些預定義的形狀元素，可被開發者使用和操作： 矩形 <rect> 圓形 <circle> 橢圓 <elli...
    _chuuuing_閱讀 1,123評論 0贊 0
  • 一、什么是SVG？ SVG指可伸縮矢量圖形（Scalable Vector Graphics）； SVG用來定義用...
    清心挽風閱讀 1,411評論 1贊 3
  • 一：什么是SVG？ 對于SVG的定義如下： ①：SVG 指的是可伸縮矢量圖形 (Scalable Vector G...
    GreenHand1閱讀 823評論 0贊 1
  • 地府有一點燈人，出了名的性子冷淡，不接觸地府里任何鬼，也沒有人聽過她說話，就連路上見到閻王都把他當空氣。 ...
    煌箜閱讀 888評論 0贊 3