svg基礎--基本語法與標籤

svg系列–基礎

這裏會總結svg的基礎知識和一些經典的案例。

svg簡介

SVG（Scalable Vector Graphics）is an XML-based Language for creating graphics. 這是MDN英文文檔對svg的介紹。 svg支持css,這一點有效的將圖形和樣式區分開。 svg的應用： 一、繪圖 二、動畫 

如何在網頁中引用svg元素

svg元素能夠經過<embed>、<object>或者<iframe>嵌入網頁之中，可是咱們這裏推薦使用<embed>, 兼容性比較好。

    <embed src="circle.svg" type="image/svg+xml" />

    <svg width="" height="">繪製的內容</svg>
一些公共屬性

 

• fill: 填充色 | url(id)這裏主要是引用漸變色做爲背景
• stroke: 線條的顏色
• stroke-width: 線條的寬度
• stroke-linecap: 線條末尾的樣式 (默認)butt (圓角)round (方形)square ，round和square會影響線條的長度
• opacity: 不透明度 0~1
• fill-rule: nonzero (非零環繞原則)evenodd
• stroke-dasharray: 建立虛線數組 x,y,z,..... (長度，間隔，長度，間隔，。。。。)
• stroke-dashoffset: 偏移
• filter: url(id) 添加濾鏡

繪製矩形

    --------- 矩形 ---------
    <rect x="" y="" rx="" ry="" width="" height=""></rect>
 (x, y): 左上角座標 rx: x軸圓角半徑 ry: y軸圓角半徑 width: 長度 height: 高度

 

繪製圓

    --------- 圓 ---------
    <circle cx="" cy="" r=""></circle>
 (cx, cy): 圓心 r: 半徑

 

繪製橢圓

    -------------- 橢圓 --------------
    <ellipse cx="" cy="" rx="" ry=""></ellipse>
 (cx, cy): 中心點 rx: x軸半徑 ry: y軸半徑

 

繪製線條

    -------- 線條 --------
    <line x1="" y1="" x2="" y2=""></line>
 (x1, y1): 線條的起始點 (x2, y2): 線條的結束點

 

繪製多邊形

    --------------- 多邊形polygon ---------------
    <polygon points=""></polygon>  
    points: x,y x1,y1 ........

 

繪製曲線

    ---------------- 曲線polyline ----------------
    <polyline points=""></polyline>  
    points: x,y x1,y1 .........

 

繪製路徑

    --------------- 路徑 ---------------
    <path d=""></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 命令區分大小寫，除了Z。大寫表示絕對位置，小寫表示相對位置

 

。 

繪製文本

    --------------- 繪製文本 ---------------
    <text x="" y="" text-anchor="" dx="" dy="">text</text>
 (x, y): 文字左下角的起始座標 text-anchor: start middle end 文本錨點(可能會和咱們預期的座標有出入) dx: 橫軸的偏移 dy: 縱軸的偏移 路徑文本的繪製 <textPath xlink:href="#path">text</textPath>

    <text>中還能夠嵌套<tspan x="" y="">text</tspan>
 同時文本也能夠做爲超連接 <a xlink:href="" target="">
      <text></text>
    </a>

 

濾鏡的使用

    ----------------- 濾鏡 -----------------
    <filter id=""></filter>

 

MDN的案例

漸變

  -------------- 漸變 -------------- 線性漸變 <linearGradient x1="" y1="" x2="" y2="" gradientUnits>
    <stop offset="" style="stop-color:;stop-opacity:;"></stop>
  </linearGradient>
  gradientUnits: 定義座標 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) x1: 漸變開始橫座標 y1: 漸變開始縱座標 x2: 漸變結束橫座標 y2: 漸變結束縱座標 offset: 漸變開始的位置 0% - 100% 放射性漸變 <radialGradient cx="" cy="" r="" fx="" fy="" gradientUnits>
    <stop offset="" style="stop-color:;stop-opacity:;"></stop>
  </radialGradient>
  gradientUnits: 定義座標 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) cx: 外層圓心橫座標 cy: 外層圓心縱座標 fx: 內層圓心橫座標 fy: 內層圓心縱座標 r: 發散的半徑 offset: 漸變開始的位置 0% - 100%

 

經常使用的幾個標籤

  ---------- 裁剪 ----------
  <clipPath id="">裁剪路徑</clipPath>

  ---------- 引用元素 ----------
  <defs>聲明引用元素</defs>

  ---------- 拷貝 ----------
  <use x="" y="" width="" height="" xlink:href="id"></use>    
 (x, y): 克隆對象的左上角座標 width: 克隆對象的寬度 height: 克隆對象的高度 xlink:href 引用克隆對象 ---------- 模式 ----------  
  <pattern id="" width="" height="" patternUnits="" patternTransform="">模式內的形狀</pattern>
 width: 模式的寬度 height: 模式的高度 patternUnits: 定義pattern的座標系統 userSpaceOnUse(不會對pattern的單位進行縮放) | objectBoundingBox(會) patternTransform: 變換 ---------- 遮罩 ----------
  <mask maskUnits="" x='' y="" width="" height="">內容</mask>
 (x, y): 裁剪的左上角座標。 width: 裁剪的寬度 height: 裁剪的高度

 

CSS3中的svg的影子

    --------------------- clip-path 裁剪 --------------------- clip-path: 第一種: url(id) 配合svg的<clipPath> 第二種: polygon(x y,x1 y1,x2 y2,.......) 第三種：inset(top right bottom left round rt rr rb rl) 圓角矩形 這裏比較重要的一點就是polygon的過渡動畫必需要求各個狀態的點的個數同樣