走進HTML5-讓你從不懂到精通SVG(大量實例操做)

可縮放矢量圖形（英語：Scalable Vector Graphics，SVG）是一種基於可擴展標記語言（XML），用於描述二維矢量圖形的圖形格式。SVG由W3C制定，是一個開放標準。

應用場景

• 圖表
• 圖標 icon
• 動效
• 矢量圖

SVG 的優點

因爲 SVG 圖像是矢量圖像，能夠無線縮放，並且在圖像質量降低方面沒有任何問題。由於 SVG 圖像是使用 XML標記 構建的，瀏覽器經過每一個點和線來打印他們，而不是用預約義的像素填充某些空間。這確保 SVG 圖像能夠適應不一樣的屏幕大小和分辨率。

因爲是在 XML 中定義的，SVG 圖像比 JPG 或 PNG 圖像更靈活，並且咱們可使用Css 和 JavaScript 進行交互。

開始

<!-- 定義繪圖區域 -->
<svg width="500px" height="500px"></svg>
複製代碼

代碼示例

<svg width="500px" height="500px">
  <!-- 直線 -->
  <!-- x1, y1 x2, y2 定義兩點座標 -->
  <line x1="100" y1="100" x2="200" y2="100"></line>
  <!-- 矩形 -->
  <!-- x ， y 是起始座標，width 和 height 是自解釋的。rx, ry是定義圓角 -->
  <rect x="50" y="50" width="100" height="100" rx="10" ry="20"></rect>
  <!-- 圓形 -->
  <!-- 半徑 圓心 -->
  <circle r="50" cx="220" cy="100"></circle>
  <!-- 橢圓形 -->
  <!-- x軸，y軸 圓心 -->
  <ellipse rx="100" ry="50" cx="100" cy="200"></ellipse>
  <!-- 折線 -->
  <!-- 使用 points 定義多個點 各組點使用逗號分開 -->
  <polyline points="60 50, 75 35, 100 50, 125 35, 150 50, 175 35, 190 50"></polyline>
  <!-- 多邊形 -->
  <!-- 經過定義多個點 進行連線 -->
  <polygon points="125 125, 130 140, 120 140"></polygon>
  <!-- 文本 -->
  <text x="125" y="220">Hello Lambda</text>
</svg>
複製代碼

/* 使用 css 定義svg樣式 */
svg {
  /* 線條顏色 */
  stroke: #000;
  /* 線條粗細 */
  stroke-width: 5;
  /* 線條樣式 */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 填充 */
  fill: #f40;
  /* 線條透明度 */
  stroke-opacity: 0.8;
  /* 填充透明度 */
  fill-opacity: 0.6;
}
複製代碼

path 元素

<!-- M指令和L指令 -->
<!-- 一組x和y座標 -->
<!-- M表示移動到 L表示劃線到 Z 表示閉合路徑(不分大小寫) -->
<path d="M 10 10 L 20 10" />
<!-- m 指令和 l 指令 -->
<path d="m 100 10 l 20 10"/>
<!-- H 和 V 命令 -->
<path d="M 100 100 H 200 V 200"/>
<!-- Z 命令 -->
<path d="M 100 100 H 200 V 200 Z"/>
<!-- A 命令 -->
<!-- rx ry x-axis-rotation large-arc-flag sweep-flag x y • rx ry 圓弧的x軸半徑和y軸半徑 • x-axis-rotation 圓弧相對x軸的旋轉角度，默認是順時針，能夠 設置負值 • large-arc-flag 表示圓弧路徑是大圓弧仍是小圓弧 1大圓弧 • sweep-flag 表示從起點到終點是順時針仍是逆時針，1表示順 時針，0表示逆時針 • x y 表示終點座標，絕對或相對 -->
<path d="M 200 110 A 70 120 90 1 1 150 200"/>
<!-- Q T 二次貝塞爾曲線 -->
<path d="M 10 10 Q 100 100, 150 150 T 300 120" />
<!-- C S 三次貝塞爾曲線 -->
<path d="M 10 10 C 100 100, 180 280, 200 120 T 300 120"/>
複製代碼

絕對座標和相對座標

代碼示例

<svg width="500px" height="500px">
  <path d=" M 50 50 L 20 100 L 30 100 L 0 150 L 40 150 L 40 250 L 60 250 L 60 150 L 100 150 L 60 100 L 80 100 Z "></path>
</svg>
複製代碼

<svg width="500px" height="500px">
  <path d="M 10 10 H 110 V 100 H 210 V 200" />
</svg>
複製代碼

<svg width="500px" height="500px">
  <!-- 圓弧指令 -->
  <!-- rx ry x-axis-rotation large-arc-flag sweep-flag x y -->
  <!-- 起點 x半徑 y半徑 旋轉角度 大圓弧仍是小圓弧 順時針/逆時針 終點座標 -->
  <path d="M 200 110 A 70 120 90 1 1 150 200" />
</svg>
複製代碼

<svg width="500px" height="500px">
  <path d="M 10 10 , Q 100 100, 150 150 T 300 120"/>
</svg>
複製代碼

<svg width="500px" height="500px">
  <path d="M 10 10 C 100 100, 180 280, 200 120 T 300 120"/>
</svg>
複製代碼

線性漸變

<svg width="500px" height="500px">
  <!-- 定義漸變規則 -->
  <defs>
    <!-- 線性漸變 -->
    <linearGradient id="bg1" x1="0" y1="0" x2="0" y2="100%">
        <stop offset="0%" style="stop-color:rgb(255,255,0);"/>
        <stop offset="100%" style="stop-color:rgb(255,0,0);"/>
    </linearGradient>
  </defs>
  <!-- fill 使用漸變 -->
  <rect x="0" y="0" width="500" height="500"style="fill:url(#bg1)"/>
</svg>
複製代碼

徑向漸變

<svg width="500px" height="500px">
  <defs>
    <radialGradient id="bg2" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
      <stop offset="0%" style="stop-color:green;"/>
      <stop offset="100%" style="stop-color:red;"/>
    </radialGradient>
  </defs>
  <rect x="0" y="0" width="500" height="500" style="fill:url(#bg2)"/>
</svg>
複製代碼

高斯模糊濾鏡

<svg width="500px" height="500px">
  <defs>
      <filter id="Gaussian_Blur">
          <feGaussianBlur in="SourceGraphic" stdDeviation="20"/>
      </filter>
  </defs>
  <rect x="0" y="0" width="500" height="500" fill=」yellow」 style="filter:url(#Gaussian_Blur)"/>
</svg>
複製代碼

更多濾鏡效果能夠訪問 www.w3school.com.cn/svg/svg_fil…

SVG 路徑動畫

經過控制SVG的樣式來實現動畫

/* 線段間距 */
stroke-dasharray: 100px;
/* 線段偏移 */
stroke-dashoffset: 15px
複製代碼

經過修改stroke-dashoffset的值讓路路徑慢慢地展示出來

代碼示例

svg {
  /* 線條顏色 */
  stroke: #000;
  /* 線條粗細 */
  stroke-width: 5;
  /* 線條樣式 */
  stroke-linecap: round;
  stroke-linejoin: round;
  /* 填充 */
  fill: #f40;
  /* 線條透明度 */
  stroke-opacity: 0.8;
  /* 填充透明度 */
  fill-opacity: 0.6;
}
path{
  stroke-dasharray: 41;
  stroke-dashoffset: -82;
  animation: dash 1s linear forwards infinite;
}
複製代碼

<svg width="500px" height="500px">
  <path d="M 100 100 L 200 500 "/>
</svg>
複製代碼

• 能夠經過 getTotalLength() 函數獲取到 path 路徑總長度
• 能夠經過 getPointAtLength(X) 函數獲取路徑上距離起始點距離x長度的點的座標

JS 生成 SVG 元素

1. 建立 SVG 元素須要指定命名空間
2. SVG 元素對象通常經過調用 setAttribute() 方法來設定屬性值

let char = "http://www.w3.org/2000/svg",
    svg = document.createElementNS(char,'svg')
    
svg.setAttribute('width', 500)
svg.setAttribute('height', 500)
svg.setAttribute('viewBox','0 0 500 500')

let rect = document.createElementNS(char,'rect')

rect.setAttribute('x', 100)
rect.setAttribute('y', 100)
rect.setAttribute('width', 100)
rect.setAttribute('height', 100)
rect.setAttribute('fill', '#0fc')

svg.appendChild(rect)

document.body.appendChild(svg)
複製代碼

---

但願對讀完本文的你有幫助、有啓發，若是有不足之處，歡迎批評指正交流！

歡迎關注個人我的博客分享一些前端技術、面試題、面試技巧等

辛苦整理良久，還望手動點贊鼓勵~

---

'摘抄'不是單純的「粘貼->複製」，而是眼到，手到，心到的一字一句敲打下來。

博客聲明:全部轉載的文章、圖片僅用於做者本人收藏學習目的，被要求或認爲適當時，將標註署名與來源。若不肯某一做品被轉用，請及時通知本站，本站將予以及時刪除。