SVG XML 格式定義圖形入門介紹

老马啸西风發表於2024-03-30
SVGXML

SVG

SVG means Scalable Vector Graphics.

  • SVG 使用 XML 格式定義圖形
  • SVG 影像在放大或改變尺寸的情況下其圖形質量不會有所損失
  • SVG 是全球資訊網聯盟的標準

Hello World

  • Use SVG in html

and you can see:

  • Link to the SVG file
    You can use <a> tag to link to the svg file, like this:
<a href="rect.svg">rect.svg</a>

rect.svg

Shape

There some pre-shapes:

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

Rect

Line

Polygon

the fill-rule

Polyline

Path

Some Commands

所有命令均允許小寫字母。大寫表示絕對定位，小寫表示相對定位

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

Text

text zh_CN

  • Common text
Hello SVG Hello SVG
  • Rotate

rotate(<rotate-angle> [<cx> <cy>])

Hello SVG Hello SVG
  • Text with path
I love SVG I love SVG






I love SVG I love SVG

  • <tspan>

元素可以安排任何分小組與<tspan>元素的數量

Several lines: First line Second line Several lines: First line Second line

Stroke

  • Stroke 屬性定義一條線，文字或元素輪廓顏色

g元素這樣的將多個元素組織在一起的元素

  • stroke-width 屬性定義了一條線，文字或元素輪廓厚度
  • stroke-linecap 屬性定義不同型別的開放路徑的終結
  • stroke-dasharray 建立不同的虛線

相關文章