SVG基础知识

是MDN的教程的学习笔记。

1 定义

Scalable Vector Graphics，可伸缩矢量图形

2 用法

在 html 中，使用 XML 格式定义图形

2.1 直接嵌入

<svg>
    形状
</svg>

example：

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
     <circle cx="100" cy="50" r="40" stroke="black" stroke-width="2" fill="red" />
</svg>

2.2 标签

<embed>

example:

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

<object>

example:

<object data="image.svg" type="image/svg+xml" />

<iframe>

example:

<iframe src="image.svg"></iframe>

tip: 以上都需要SVG文件

2.3 链接

用 <a> 标签链接到一个SVG文件

example:

<a href="circle1.svg">View SVG file</a>

3 坐标系

坐标起点（0，0）左上角，x轴从左向右 →，y轴从上向下 ↓

4 常用工具

通过在 <svg> 标签中添加标签 <> 实现

4.1 形状

形状

矩形

圆形

椭圆

多边形

标签

<rect>

<circle>

<ellipse>

<polygon>

专有属性

x 左上角x坐标

y 左上角y坐标

width 宽度

height 长度

rx 水平圆角半径

ry 垂直圆角半径

cx 圆心x坐标

cy 圆心y坐标

r 半径

cx 圆心x坐标

cy 圆心y坐标

rx 水平半径

ry 垂直半径

points 点（偶数量）

大小

width height

r

rx ry

CSS属性

（style）

fill 填充颜色

stroke 边框颜色

stroke-width 边框宽度

fill-opacity

stroke-opacity

同←

同←←

同←←←

example

<rect x="10" y="10" width="100" height="100" rx="15" ry="15"/>

<circle cx="60" cy="60" r="50"/>

<ellipse cx="100" cy="50" rx="100" ry="50" />

<polygon points="0,100 50,25 50,75 100,0" />

4.2 线条

形状

直线

曲线

路径

标签

<line>

<polyline>

<path>

专有属性

x1 起点x坐标

x2 起点y坐标

y1 终点x坐标

y2 终点y坐标

points 折线上的点

d 路径指令

pathLength 路径长度（非必须）

CSS属性

（style）

fill 填充颜色

stroke 边框颜色

stroke-width 边框宽度

fill-opacity

stroke-opacity

同←

同←←

example

<line x1="0" y1="80" x2="100" y2="20" stroke="black" />

<polyline points="0,100 50,25 50,75 100,0" />

<path d="M 10,30 A 20,20 0,0,1 50,30 A 20,20 0,0,1 90,30 Q 90,60 50,90 Q 10,60 10,30 z"/>

d 路径指令

直线

描述

语法1

语法2

Move to (x,y)

M x y

m dx dy

Line to (x,y)

L x y

l dx dy

Horizontal x

H x

h dx

Vertical y

V y

v dy

Close Path

Z

z

曲线

描述

语法1

语法2

cubic curve 三次曲线

C x1 y1 , x2 y2 , x y

c dx1 dy1 , dx2 dy2 , dx dy

shortcut of C

S x2 y2 , x y

s dx2 dy2 , dx dy

quadractic curve 二次曲线

Q x1 y1 , x y

q dx1 dy1 , dx dy

shortcut of Q

T x y

t dx dy

弧

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

4.3 文本

标签 <text>

属性 x、y - 位置 ； 字体CSS属性 ；

example：

<text x="20" y="35" class="small">My</text>

标记部分文本

标签 <tspan>

属性 x、y - 相对包含text的位置 ； dx、dy - 相对当前位置的位置 ； rotate - 单个字体旋转 ； textLength ；

example：

<text>
This is <tspan font-weight="bold" fill="red">bold and red</tspan>
</text>

文本展示路径

标签 <textPath>

属性 xlink:href - 对应的路径

example：

<path id="my_path" d="M 20,20 C 80,60 100,40 120,20" fill="transparent" />
<text>
<textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#my_path">
A curve.
</textPath>
</text>

4.4 图像

标签 <image>

属性 xlink:href - 图片的路径

example:

<image x="90" y="-65" width="128" height="146" transform="rotate(45)"
xlink:href="https://developer.mozilla.org/static/img/favicon144.png"/>

4.5 容器

标签 <g>

描述 组合 用于把相关元素进行组合的容器元素

属性 常见属性

example：

<g fill="white" stroke="green" stroke-width="5">
<circle cx="40" cy="40" r="25" />
<circle cx="60" cy="60" r="25" />
</g>

5 常用属性

通过在标签中直接添加属性实现，attrName = "attributes"；
部分属性可通过 CSS 实现，比如 fill 、stroke 。

5.1 填充和描边 fill & stroke

fill 填充

颜色 fill = "colorName | rgb | hex | rgba"

透明度 fill-opacity = "float"

stroke 描边

颜色 stroke = "colorName | rgb | hex | rgba"

透明度 stroke-opacity = "float"

宽度 stroke-width = "int"

线终端形状 stroke-linecap = "butt | square | round"

线交叉形状 stroke-linejoin = "miter | round | bevel"

虚线 stroke-dasharray = "numbers"

5.2 渐变 gradient

linear gradient 线性渐变

标签 <linearGradient>

属性 id - id名称 ； <stop> - 节点 offset - 渐变偏移 stop-color - 节点颜色 stop-opacity - 节点透明度 ；

用法 放在 fill 的 url 值内进行调用

example:

<defs>
<linearGradient id="Gradient2" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stop-color="red"/>
<stop offset="50%" stop-color="black" stop-opacity="0"/>
<stop offset="100%" stop-color="blue"/>
</linearGradient>
</defs>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#Gradient2)"/>

radial gradient 径向渐变

标签 <radialGradient>

属性 id - id名称 ； <stop> - 节点 offset - 渐变偏移 stop-color - 节点颜色 stop-opacity - 节点透明度 ；

用法 放在 fill 的 url 值内进行调用

example:

<defs>
<radialGradient id="RadialGradient2" cx="0.25" cy="0.25" r="0.25">
<stop offset="0%" stop-color="red"/>
<stop offset="100%" stop-color="blue"/>
</radialGradient>
</defs>
<rect x="10" y="120" rx="15" ry="15" width="100" height="100" fill="url(#RadialGradient2)"/>

5.3 重复 patterns

标签 <pattern>

属性 id - id名称 ； width、height - 小数，重复个体占总体（1）的大小 ； 内部包含需要重复的标签

用法 放在 fill 的 url 值内进行调用

example:

<defs>
<pattern id="Pattern" x="0" y="0" width=".25" height=".25">
<rect x="0" y="0" width="50" height="50" fill="skyblue"/>
</pattern>
</defs>
<rect fill="url(#Pattern)" stroke="black" width="200" height="200"/>

5.4 变换 transform

translate 移动

transform = "translate(x,y)"

rotation 旋转

transform = "rotation(angle)"

5.5 剪切和合成 clip & mask

clip 剪切

标签 <clipPath>

属性 id - id名称 ；内部包含需要剪切的标签

用法 放在 clip-path 的 url 值内进行调用

example:

<defs>
<clipPath id="cut-off-bottom">
<rect x="0" y="0" width="200" height="100" />
</clipPath>
</defs>
<circle cx="100" cy="100" r="100" clip-path="url(#cut-off-bottom)" />

mask 合成

标签 <mask>

属性 id - id名称 ；内部包含需要合成的标签

用法 放在 mask 的 url 值内进行调用

example:

<defs>
<linearGradient id="Gradient">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</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="red" mask="url(#Mask)" />

5.6 滤镜 filter

标签 <filter>

属性 id - id名称 ；内部包含各种标签

用法 放在 filter 的 url 值内进行调用

具体见 MDN-Filter_effects

6 其他

具体见 MDN-SVGTutorial