[Web] SVG 基本形狀

Web：SVG 基本形狀

官方文件

功能：用在網頁上畫圖使用

I love SVG 
  1. <svg>
  2.     <rect fill="#6EA9FF" height="55" stroke-width="3" stroke="#036EB7" width="117" />
  3.     <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  4.     <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
  5.     <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  6.     <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  7.     <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
  8.     <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  9.     <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
  10. </svg>

rect (矩形)

屬性
  • x (左上頂點的 x)
  • y (左上頂點的 y)
  • width
  • height
  • rx (圓角的半徑 rx，如下圖)
  • ry (圓角的半徑 ry，如下圖)
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="500" width="500">
  2.   <rect x="75" y="75" width="300" height="300" rx="100" ry="50" style="fill: rgb(0,0,255); stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3.   <ellipse cx="175" cy="125" rx="100" ry="50" style="fill: rgb(255,0,255); stroke-width: 3; stroke: rgb(0,0,0); opacity:0.25" />
  4. </svg>

circle (圓形)

屬性
  • cx (中心點的 x)
  • cy (中心的 y)
  • r (半徑 r)
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="500" width="500">
  2.   <circle cx="75" cy="75" r="100" style="fill: rgb(0,0,255); stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3. </svg>

ellipse (橢圓形)

屬性
  • cx (中心點的 x)
  • cy (中心的 y)
  • rx (x 方向半徑 r)
  • ry (y 方向半徑 r)
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="500" width="500">
  2.   <ellipse cx="75" cy="75" rx="100" ry="50" style="fill: rgb(0,0,255); stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3. </svg>

line (線段)

屬性
  • x1 (起點的 x)
  • y1 (起點的 y)
  • x2 (終點的 x)
  • y2 (終點的 y)
  • transform
css style
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="500" width="500">
  2.   <line x1="5" y1="5" x2="450" y2="400" style="stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3. </svg>

polygon (多邊形)

屬性
  • points (依序的頂點)
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="300" width="200">
  2.   <polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:yellow; stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3. </svg>

polyline (多線段)

屬性
  • points (依序的頂點)
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="300" width="200">
  2.   <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160" style="fill:yellow; stroke-width: 3; stroke: rgb(0,255,0); opacity:0.5" />
  3. </svg>

path (路徑)

參考網站
屬性
  • 大寫(絕對路徑) 小寫(相對路徑)
  • d
  • transform
M/m x y 起點
L/l x y 從目前的點畫直線到 (x , y)
H/h x 從目前的點畫水平直線到 x
V/v y 從目前的點畫垂直線到 y
C/c x1 y1 x2 y2 x y 從目前的點畫貝茲曲線 (x, y)：(x1, y1) 和 (x2, y2) 為切點
S/s x2 y2 x y 從目前的點畫反射的貝茲曲線到 (x, y)：(x2, y2) 為反射的切點
Q/q x1 y1 x y 從目前的點畫二次貝茲曲線到 (x, y)：(x1, y1) 為切點
T/t x y 從目前的點畫反射二次貝茲曲線到 (x, y)
A/a rx ry x-axis-rotation large-arc-flag sweep-flag x y
  • 從目前點畫橢圓形到 (x, y)
    • 依可完成的橢圓為主
      故有時終點會被鏡向
  • rx, ry 橢圓形半徑
  • x-axis-rotation 橢圓 x 軸 與 座標軸 x 軸的旋轉角度，且也同時需經過所有點
  • large-arc-flag 設定為最大角度的弧線
    • 若兩點距離大於 rx+ry，一律為大角度
      因三角形任一邊必小於另兩邊相加
    • 至少三個點才有作用
      想像三個點為三角形，且在橢圓中，那麼就會有兩邊的弧線
  • sweep-flag 設定順逆時針方向 (1 or 0)
Z/z
關閉路徑，將目前點與第一個點的座標連接
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="300" width="300">
  2.   <path d="M0 0 H50" stroke="red" stroke-width="3"/>
  3.   <path d="M0 0 V50" stroke="green"  stroke-width="3"/>
  4.   <path d="M0 0 L50 50" stroke="blue"  stroke-width="3"/>
  5.   <path d="M50 50 C40,90 60,90 100,90" stroke="lime" stroke-width="10" fill="none"/>
  6.   <path d="M50 50 C40,90 60,90 100,90 S150,-40 300,300" stroke="red" stroke-width="5" fill="none"/>
  7.   <path d="M0 150 Q40 90, 100 150" stroke="green" stroke-width="15" fill="none"/>
  8.   <path d="M0 150 Q40 90, 100 150 T200 100" stroke="blue" stroke-width="5" fill="none"/>
  9.   <path d="M0 150 Q40 90, 100 150 T200 100 Z" stroke="yellow" fill="white" opacity="0.25"/>
  10. </svg>
< < < < < < < < 
  1. <svg height="300" width="500">
  2.     <path d="M50 50 A50 50,0 1 0 100,0" fill="none" stroke-width="5" stroke="#ff0" />
  3.     <path d="M50 50 A50 50,0 1 1 100,0" fill="none" stroke-width="5" stroke="#ff0" />
  4.     <path d="M0 0 L50 50 A50 50,0 1 0 100 0" fill="none" stroke="#f00" />
  5.     <path d="M0 0 L50 50 A50 50,0 0 0 100 0" fill="none" stroke="#0f0" />
  6.     <path d="M0 0 L50 50 A50 10,0 1 0 100 0" fill="none" stroke-width="5" stroke="#00f" />
  7.     <path d="M0 0 L50 50 A50 10,0 0 0 100 0" fill="none" stroke="#fff" />
  8. </svg>

  1. <svg height="500" width="500">
  2.     <line x1="150" y1="150" x2="250" y2="150" stroke="#ff0" ></line>
  3.     <ellipse cx="200" cy="150" rx="50" ry= "10" stroke-width="5" stroke="#fff" fill="none" opacity ="0.25" />
  4.     <path d="M150 150 A50 10,0 0 0 250 150" stroke="#f00" fill="none" />
  5.     <path d="M150 150 A50 10,45 0 0 250 150" stroke="#0f0" fill="none" />
  6.     <path d="M150 150 A50 10,90 0 0 250 150" stroke="#00f" fill="none" />
  7. </svg>

text (文字)

屬性
  • x (左下的 x)，可多個
  • y (左下的 y)，可多個
  • dx (相對位置 x)，可多個
  • dy (相對位置 y)，可多個
  • rotate
  • textLength (文字長度)
  • lengthAdjust (調整文字符合長度)
    • spacing (拉寬文字間距)
    • spacingAndGlyphs (拉寬文字)
  • <tspan></tspan>
  • <textPath></textPath>
  • transform
css style
  • fill (填色)
  • stroke-width (線寬)
  • stroke (線色)
  • opacity (不透明度)
  1. <svg height="500" width="500" style="background:white">
  2.     <text x="0" y="50" rotate="30" style="font-size:24px;">旋轉文字</text>
  3.     <text x="0" y="100" textLength="300" lengthAdjust="spacing">lengthAdjust</text>
  4.     <text x="0" y="150" textLength="300" lengthAdjust="spacingAndGlyphs">lengthAdjust</text>
  5.     <text x="50" y="300">Several lines:
  6.         <tspan x="0" y="200" dx="10,20,30,40,50" dy="60" fill="#f00">element</tspan>
  7.         <tspan x="10" y="250" dx="0,10,20,30,40,50" fill="#f60">element</tspan>
  8.     </text>
  9.     <defs>
  10.         <path id="a1" d="M300 300 C150 150 100 -50 500 500" stroke="#000" fill="none"/>
  11.     </defs>
  12.     <text>
  13.         <textPath xlink:href="#a1">隨著路徑跑的文字</textPath>
  14.     </text>
  15. </svg>
旋轉文字 lengthAdjust lengthAdjust Several lines: element element 隨著路徑跑的文字

g (群組)

屬性
  • transform
  1. <svg>
  2.     <g> 
  3.       <rect fill="#6EA9FF" height="55" stroke-width="3" stroke="#036EB7" width="117" />
  4.       <circle cx="50" cy="50" r="40" stroke="green" stroke-width="4" fill="yellow" />
  5.       <ellipse cx="200" cy="80" rx="100" ry="50" style="fill:yellow;stroke:purple;stroke-width:2" />
  6.       <line x1="0" y1="0" x2="200" y2="200" style="stroke:rgb(255,0,0);stroke-width:2" />
  7.       <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
  8.       <polyline points="20,20 40,25 60,40 80,120 120,140 200,180" style="fill:none;stroke:black;stroke-width:3" />
  9.       <path d="M 100 350 q 150 -300 300 0" stroke="blue" stroke-width="5" fill="none" />
  10.       <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text> 
  11.     </g>
  12. </svg>
I love SVG

Maker

可用在 path or polyline 參考範例
屬性
  • id
  • viewbox (x,y,width,height)
  • refX (參考的起點 X)
  • refY (參考的起點 Y)
  • markerWidth (marker 的寬)
  • markerHeight (marker 的高)
  • orient (角度，可設 auto)
  • markerUnits (單位大小，可設 strokeWidth(預設) or userSpaceOnUse)
  1. <svg>
  2.   <defs>
  3.     <marker id="arrow-start" markerheight="10" markerwidth="10" markerUnits="userSpaceOnUse" orient="auto" refx="0" refy="0" viewbox="0 -3 10 10">
  4.       <path d="M0,-3L10,0L0,3z" fill="#f00"></path>
  5.     </marker>
  6.  
  7.     <marker id="arrow-mid" markerheight="10" markerwidth="10" orient="auto" refx="0" refy="0" viewbox="0 -3 10 10">
  8.       <path d="M0,-3L10,0L0,3z" fill="#0f0"></path>
  9.     </marker>
  10.  
  11.     <marker id="arrow-end" markerheight="10" markerwidth="10" markerUnits="strokeWidth"  orient="auto" refx="0" refy="0" viewbox="0 -3 10 10">
  12.       <path d="M0,-3L10,0L0,3z" fill="#00f"></path>
  13.     </marker>
  14.   </defs>
  15.  
  16.   <polyline fill="none" marker-end="url(#arrow-end)" marker-start="url(#arrow-start)" points="50,20 150,20" stroke-width="5" stroke="yellow"></polyline>
  17.   <path d="M5,50 L5,100 L 50 100" fill="none" marker-end="url(#arrow-end)" marker-mid="url(#arrow-mid)" marker-start="url(#arrow-start)" stroke-width="1" stroke="yellow"></path>
  18. </svg>

留言

張貼留言