SVG簡介

wwh4969099發表於2018-05-22
SVG

SVG

What is SVG?

Scalable Vector Graphics 可縮放向量圖，按照xml格式儲存的字尾名為svg的檔案。

For example:

<?xml version="1.0" encoding="UTF-8"?>
<svg width="200" height="250" version="1.1" xmlns="http://www.w3.org/2000/svg">

    <rect x="10" y="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>
    <rect x="60" y="10" rx="10" ry="10" width="30" height="30" stroke="black" fill="transparent" stroke-width="5"/>

    <circle cx="25" cy="75" r="20" stroke="red" fill="transparent" stroke-width="5"/>
    <ellipse cx="75" cy="75" rx="20" ry="5" stroke="red" fill="transparent" stroke-width="5"/>

    <line x1="10" x2="50" y1="110" y2="150" stroke="orange" stroke-width="5"/>
    <polyline points="60 110 65 120 70 115 75 130 80 125 85 140 90 135 95 150 100 145"
              stroke="orange" fill="transparent" stroke-width="5"/>

    <polygon points="50 160 55 180 70 180 60 190 65 205 50 195 35 205 40 190 30 180 45 180"
             stroke="green" fill="transparent" stroke-width="5"/>

    <path d="M20,230 Q40,205 50,230 T90,230" fill="none" stroke="blue" stroke-width="5"/>
</svg>
複製程式碼

可以直接當做html元素使用：svg.html

基礎圖形

rect

矩形

x y 左上角的位置

rx ry 圓角

width height 寬高

circle

圓

cx cy 圓心座標

r 半徑

ellipse

橢圓

cx cy 圓心座標

rx 橫座標半徑

ry 縱座標半徑

line

直線

x1 y1 起點座標

X2 y2 終點座標

polyline

折線

points 座標點集合

polygon

多邊形

points 頂點集合 終點和起點自動閉合

path

路徑

d 命令集合

Path

各種線的組合

通過一個命令符 + 座標點來組合繪製影象

移動

#####M m (move)

將畫筆移動到指定位置

M x y (or m dx dy)
複製程式碼

直線

#####L l (line)

從當前點畫直線到指定點

L x y (or l dx dy)
複製程式碼
H h (horizonal) V v (vertical)

水平移動 垂直移動

H x (or h dx)
V y (or v dy)
複製程式碼

閉合

Z z (Close Path)

自動將首尾用直線連線形成閉合的圖形

<path d="M10 10 H 90 V 90 H 10 Z" fill="transparent" stroke="black"/>
複製程式碼

曲線

#####C c (Bezier Curves)

貝塞爾曲線（通過四個點生成曲線）

C x1 y1, x2 y2, x y (or c dx1 dy1, dx2 dy2, dx dy)
複製程式碼

SVG簡介

S s (smooth)

平滑過渡，銜接兩段曲線

S x2 y2, x y (or s dx2 dy2, dx dy)
複製程式碼

SVG簡介

Q q (quadratic curve)

二次曲線，只有一個控制點的貝塞爾曲線

Q x1 y1, x y (or q dx1 dy1, dx dy)
複製程式碼

SVG簡介

T t (cubic Bezier curve)

三次曲線

T x y (or t dx dy)
複製程式碼

SVG簡介

Arcs

弧線（橢圓的一部分）

A rx ry x-axis-rotation large-arc-flag sweep-flag x y
a rx ry x-axis-rotation large-arc-flag sweep-flag dx dy
複製程式碼

繪圖

Fill

fill: 顏色名字, rgb 值 (rgb(255,0,0)), 16進位制值, rgba值

fill-opacity 透明度

fill="purple"
fill-opacity="0.5"
複製程式碼

####Stroke

stroke-linecap

前後間隙

butt 不延伸

square 前後延伸一個寬度

round 前後延伸一個圓角寬度

stroke-linejoin

連線處樣式

miter 直角轉彎

round 圓角轉彎

bevel 三角轉彎

stroke-dasharray

虛線，以逗號隔開的一串數字

USE CSS

以上的樣式都可以通過css來設定

漸變

Linear Gradient

<stop offset="100%" stop-color="yellow" stop-opacity="0.5"/>
複製程式碼

####Radial Gradient

<radialGradient id="Gradient" cx="60" cy="60" r="50" fx="35" fy="35" gradientUnits="userSpaceOnUse">
複製程式碼
Center and focal point
spreadMethod

平鋪 Patterns

<svg width="200" height="200" xmlns="http://www.w3.org/2000/svg">
  <defs>
    <linearGradient id="Gradient1">
      <stop offset="5%" stop-color="white"/>
      <stop offset="95%" stop-color="blue"/>
    </linearGradient>
    <linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
      <stop offset="5%" stop-color="red"/>
      <stop offset="95%" stop-color="orange"/>
    </linearGradient>

    <pattern id="Pattern" x="0" y="0" width=".25" height=".25">
      <rect x="0" y="0" width="50" height="50" fill="skyblue"/>
      <rect x="0" y="0" width="25" height="25" fill="url(#Gradient2)"/>
      <circle cx="25" cy="25" r="20" fill="url(#Gradient1)" fill-opacity="0.5"/>
    </pattern>
  </defs>

  <rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>
</svg>
複製程式碼

文字

tspan

文字元素可以設定字型樣式

x y dx dy 設定絕對位置或者相對位置

rotate 旋轉

textLength 文字的總長度

tref

引用定義好的文字

textPath

文字按照指定的路徑排列

變形

transform 與css3的一致

剪下與蒙版

clipPath

<svg width="100" height="100" >
  <defs>
    <clipPath id="myClip">
      <rect x="0" y="10" width="100" height="35" />
      <rect x="0" y="55" width="100" height="35" />
    </clipPath>
  </defs>
  <circle cx="50" cy="50" r="50" clip-path="url(#myClip)" />
</svg>
複製程式碼

mask

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <defs>
    <linearGradient id="Gradient">
      <stop offset="0" stop-color="white" stop-opacity="0" />
      <stop offset="1" stop-color="white" stop-opacity="1" />
    </linearGradient>
    <mask id="Mask">
      <rect x="0" y="0" width="200" height="200" fill="url(#Gradient)"  />
    </mask>
  </defs>

  <rect x="0" y="0" width="200" height="200" fill="green" />
  <rect x="0" y="0" width="200" height="200" fill="red" mask="url(#Mask)" />
</svg>
複製程式碼

Transparency with opacity

<svg width="200" height="200" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
  <rect x="0" y="0" width="200" height="200" fill="blue" />
  <circle cx="100" cy="100" r="50" stroke="yellow" stroke-width="40" stroke-opacity=".5" fill="red" />
</svg> 
複製程式碼

插入圖片

可以將SVG簡介元素直接插入svg元素使用

SVG應用舉例

clip-path animation

motion-path

Masking vs. Clipping: When to Use Each

推薦網站

codepen

can i use

相關文章