SVG学习笔记

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