主题
SVG
介绍
特点：
- 无损缩放
- 例如：图标、小元素、辅助图形、插画
- 高级能力
- 例如：渐变、滤镜、动画、蒙版、文字
- 可通过 css、js 进行自定义设置
通用属性
样式属性
fill：填充颜色。- 例如：
fill="red"，表示填充红色。
- 例如：
stroke：描边颜色。- 例如：
stroke="blue"，表示描边蓝色。
- 例如：
stroke-width：描边宽度。- 例如：
stroke-width="2"，表示描边宽度为 2 个单位。
- 例如：
stroke-dasharray：描边虚线样式。- 例如：
stroke-dasharray="5,3"，表示虚线段长度为 5 个单位，间隔为 3 个单位。
- 例如：
stroke-dashoffset：描边虚线偏移量。- 例如：
stroke-dashoffset="2"，表示虚线从偏移 2 个单位的位置开始绘制。
- 例如：
stroke-linecap：描边端点样式。- 例如：
stroke-linecap="round"，表示端点为圆形。 - 可选值：
butt：平直端点。round：圆形端点。square：方形端点。
- 例如：
stroke-linejoin：描边连接点样式。- 例如：
stroke-linejoin="bevel"，表示连接点为斜角。 - 可选值：
miter：尖角连接。round：圆角连接。bevel：斜角连接。arcs：圆弧连接。miter-clip：裁剪尖角连接。round-clip：裁剪圆角连接。bevel-clip：裁剪斜角连接。arcs-clip：裁剪圆弧连接。- ...
- 例如：
stroke-miterlimit：描边尖角连接的限制。- 例如：
stroke-miterlimit="4"，表示当尖角连接的长度超过 4 倍的描边宽度时，改为斜角连接。
- 例如：
vector-effect：矢量效果属性。- 例如：
vector-effect="non-scaling-stroke"，表示描边不随缩放而变化。
- 例如：
opacity：透明度。- 例如：
opacity="0.5"，表示透明度为 50%。
- 例如：
fill-opacity：填充透明度。- 例如：
fill-opacity="0.5"，表示填充透明度为 50%。
- 例如：
stroke-opacity：描边透明度。- 例如：
stroke-opacity="0.5"，表示描边透明度为 50%。
- 例如：
transform：变换属性，用于旋转、缩放、平移等。- 例如：
transform="rotate(45)"，表示旋转 45 度。
- 例如：
布局属性
x/y：元素的 x 和 y 坐标位置。- 例如：
x="10"，表示元素在 x 轴方向偏移 10 个单位。
- 例如：
width/height：元素的宽度和高度。- 例如：
width="100"，表示元素宽度为 100 个单位。
- 例如：
结构与布局
svg
根元素，定义了 SVG 图像的命名空间和画布属性。
示例
xml
<svg width="100" height="100" xmlns="http://www.w3.org/2000/svg">
<rect ... />
</svg>常用属性
width/height：宽高。viewBox：“裁切层”。- 例如：
viewBox="0 0 100 100"，表示从 (0,0) 点开始，宽高各 100 的区域作为内容显示区域。
- 例如：
preserveAspectRatio：缩放策略。- 例如：
preserveAspectRatio="xMidYMid meet"，表示内容在裁切层内居中显示，并保持纵横比。 - 常见值：
xMinYMin、xMidYMin、xMaxYMin、xMinYMid、xMidYMid、xMaxYMid、xMinYMax、xMidYMax、xMaxYMax：内容在裁切层内的对齐方式。meet：保持纵横比，内容完整显示。slice：保持纵横比，内容填满裁切层，可能被裁切。
- 例如：
xmlns：xml namespace，通常为http://www.w3.org/2000/svg。
defs
定义可复用的元素或资源，不会直接渲染。
示例
xml
<defs>
<circle id="myCircle" cx="0" cy="0" r="10" fill="blue"/>
</defs>常用属性
无特殊属性，主要用于包裹可复用元素。
use
引用已定义的可复用元素。
示例
xml
<defs>
<circle id="myCircle" cx="0" cy="0" r="10" fill="blue"/>
</defs>
<use href="#myCircle" x="20" y="20"/>
<use href="#myCircle" x="50" y="50" fill="red"/>常用属性
href：引用的元素 ID。x/y：引用元素的偏移位置。- 其他通用样式属性（如
fill、stroke等）。
g
分组元素，用于将多个 SVG 元素组合在一起，便于统一应用变换或样式。
示例
xml
<g transform="translate(10, 20)" fill="red">
<rect x="0" y="0" width="30" height="30"/>
<circle cx="50" cy="15" r="15"/>
</g>常用属性
transform：对整个分组应用变换（如平移、旋转、缩放等）。- 其他通用样式属性（如
fill、stroke等）
基础图形
rect
绘制矩形。
示例
xml
<rect x="10" y="10" width="30" height="30"/>
<rect x="60" y="10" rx="10" ry="10" width="30" height="30"/>常见属性
rx：圆角的 x 方向半径（用于绘制圆角矩形）。ry：圆角的 y 方向半径（用于绘制圆角矩形）。如果未指定ry，则默认与rx相同。
circle
绘制正圆形。
示例
xml
<circle cx="25" cy="75" r="20"/>常见属性
cx：圆心的 x 坐标。cy：圆心的 y 坐标。r：圆的半径。
ellipse
绘制椭圆形。
示例
xml
<ellipse cx="75" cy="75" rx="20" ry="10"/>常见属性
rx：椭圆的 x 方向半径。ry：椭圆的 y 方向半径。cx：椭圆中心的 x 坐标。cy：椭圆中心的 y 坐标。
line
绘制直线。
示例
xml
<line x1="10" y1="110" x2="50" y2="150" />常见属性
x1：起点的 x 坐标。y1：起点的 y 坐标。x2：终点的 x 坐标。y2：终点的 y 坐标。
polyline
绘制折线。
示例
xml
<polyline points="60,110 65,120 70,115 75,130 80,125" />常见属性
points：定义折线的点坐标，格式为x1,y1 x2,y2 x3,y3 ...。
polygon
绘制多边形。
示例
xml
<polygon points="50,160 55,180 70,180 60,190 65,205 50,195 35,205 40,190 30,180 45,180" />常见属性
points：定义多边形的点坐标，格式为x1,y1 x2,y2 x3,y3 ...。
path
绘制复杂路径。
示例
xml
<path d="M10,80 C40,10 65,10 95,80 S150,150 180,80" />常见属性
d：定义路径的命令，包括移动 (M)、直线 (L)、曲线 (C、S)、闭合 (Z) 等。
直线命令
直线命令用于在路径中绘制直线段。
M：移动到（Move To）- 作用：将画笔移动到指定的坐标点，不绘制任何线条。
- 语法：
M x yx：目标点的 x 坐标。y：目标点的 y 坐标。
xml<!-- 将画笔移动到坐标 (10, 10) --> <path d="M10,10" stroke="black" fill="none"/>L：画直线到（Line To）作用：从当前点绘制一条直线到指定的坐标点。
语法：
L x yx：目标点的 x 坐标。y：目标点的 y 坐标。
xml<!-- 从 (10, 10) 绘制一条直线到 (50, 50) --> <path d="M10,10 L50,50" stroke="black" fill="none"/>H和V：水平线和垂直线H：绘制一条水平线到指定的 x 坐标。- 语法：
H x - 示例：
H50表示从当前点绘制一条水平线到 x=50。
- 语法：
V：绘制一条垂直线到指定的 y 坐标。- 语法：
V y - 示例：
V30表示从当前点绘制一条垂直线到 y=30。
- 语法：
Z：从当前点绘制一条直线回到路径的起点，闭合路径。xml<!-- 绘制一个三角形并闭合路径 --> <path d="M10,10 L50,50 L50,10 Z" stroke="black" fill="none"/>
曲线命令
曲线命令用于在路径中绘制平滑的曲线，主要包括以下两种类型：
Q：使用一个控制点绘制二次贝塞尔曲线。
语法：
Q x1 y1, x yx1 y1：控制点的坐标。x y：目标点的坐标。
xml<!-- 从 (10, 80) 绘制一条二次贝塞尔曲线到 (180, 80)，控制点为 (95, 10) --> <path d="M10,80 Q95,10 180,80" stroke="black" fill="none"/>
C：使用两个控制点绘制三次贝塞尔曲线。
语法：
C x1 y1, x2 y2, x yx1 y1：第一个控制点的坐标。x2 y2：第二个控制点的坐标。x y：目标点的坐标。
xml<!-- 从 (10, 80) 绘制一条三次贝塞尔曲线到 (95, 80)，控制点为 (40, 10) 和 (65, 10) --> <path d="M10,80 C40,10 65,10 95,80" stroke="black" fill="none"/>
T：基于前一个控制点自动计算新的控制点，绘制平滑的二次贝塞尔曲线。
语法：
T x yx y：目标点的坐标。
xml<!-- 从 (10, 80) 绘制一条平滑的二次贝塞尔曲线到 (300, 80) --> <path d="M10,80 Q95,10 180,80 T300,80" stroke="black" fill="none"/>
S：基于前一个控制点自动计算新的控制点，绘制平滑的三次贝塞尔曲线。
语法：
S x2 y2, x yx2 y2：第二个控制点的坐标。x y：目标点的坐标。
xml<!-- 从 (10, 80) 绘制一条平滑的三次贝塞尔曲线到 (180, 80) --> <path d="M10,80 C40,10 65,10 95,80 S150,150 180,80" stroke="black" fill="none"/>
文本
text
绘制文本内容。
示例
xml
<text x="10" y="220" font-family="Arial" font-size="20" fill="black">Hello, SVG!</text>常见属性
x：文本的 x 坐标。y：文本的 y 坐标。font-family：字体名称。font-size：字体大小。fill：文本颜色。
tspan
用于在文本中创建子文本元素，允许对部分文本应用不同的样式或位置。
示例
xml
<text x="10" y="250" font-family="Arial" font-size="20" fill="black">
Hello, <tspan fill="red" font-weight="bold">SVG</tspan>!
</text>常见属性
x：子文本的 x 坐标。y：子文本的 y 坐标。- 其他通用样式属性（如
fill、font-weight等）。
textPath
用于沿着路径绘制文本。
示例
xml
<defs>
<path id="myPath" d="M10,300 C100,100 200,100 300,300" />
</defs>
<text font-family="Arial" font-size="20" fill="black">
<textPath href="#myPath" startOffset="0%">
This text follows a curved path!
</textPath>
</text>常见属性
href：引用的路径 ID。startOffset：文本在路径上的起始位置。- 例如：
startOffset="50%"，表示文本从路径的中间开始绘制。
- 例如：
图像
image
SVG 的 <image> 元素允许在一个 SVG 对象内部呈现光栅图像。
xml
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg width="5cm" height="4cm" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<image href="firefox.jpg" x="0" y="0" height="50px" width="50px"/>
</svg>动画
animate
动画元素，用于在 SVG 中创建动画效果。
示例
xml
<circle cx="50" cy="50" r="40" stroke="black" stroke-width="2" fill="red">
<animate attributeName="cx" from="50" to="150" dur="2s" repeatCount="indefinite" />
</circle>常见属性
attributeName：要动画化的属性名称。- 例如：
attributeName="x"，表示对 x 属性进行动画。
- 例如：
from：动画的起始值。- 例如：
from="0"，表示动画从 0 开始。
- 例如：
to：动画的结束值。- 例如：
to="100"，表示动画到 100 结束。
- 例如：
by：动画的增量值。- 例如：
by="50"，表示动画增加 50。
- 例如：
dur：动画持续时间。- 例如：
dur="2s"，表示动画持续 2 秒。
- 例如：
repeatCount：动画重复次数。- 例如：
repeatCount="indefinite"，表示动画无限循环。
- 例如：
repeatDur：动画重复持续时间。- 例如：
repeatDur="10s"，表示动画重复持续 10 秒。
- 例如：
fill：动画结束后的状态。- 例如：
fill="freeze"，表示动画结束后保持最后的状态。
- 例如：
href：引用外部动画资源。- 例如：
href="#myAnimation"，表示引用 ID 为 myAnimation 的动画。
- 例如：
begin：动画开始时间。- 例如：
begin="0s"，表示动画在 0 秒时开始。
- 例如：
end：动画结束时间。- 例如：
end="5s"，表示动画在 5 秒时结束。
- 例如：
animateTransform
动画元素，用于在 SVG 中创建变换动画效果。
animateMotion
动画元素，用于在 SVG 中创建路径运动动画效果。
set
动画元素，用于在 SVG 中设置属性值。
好用的库
蒙版
mask
蒙版元素，用于创建遮罩效果。
示例
xml
<defs>
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white"/>
<circle cx="50" cy="50" r="30" fill="black"/>
</mask>
</defs>
<rect x="0" y="0" width="100" height="100" fill="blue" mask="url(#myMask)"/>常见属性
id：蒙版的唯一标识符。maskUnits：蒙版的坐标系统。- 例如：
maskUnits="userSpaceOnUse"，表示使用用户坐标系统。 objectBoundingBox：表示使用对象边界框坐标系统。userSpaceOnUse：表示使用用户坐标系统。
- 例如：
maskContentUnits：蒙版内容的坐标系统。- 例如：
maskContentUnits="objectBoundingBox"，表示使用对象边界框坐标系统。 objectBoundingBox：表示使用对象边界框坐标系统。userSpaceOnUse：表示使用用户坐标系统。
- 例如：
clipPath
裁剪路径元素，用于创建裁剪效果。
示例
xml
<defs>
<clipPath id="myClip">
<circle cx="50" cy="50" r="30"/>
</clipPath>
</defs>
<rect x="0" y="0" width="100" height="100" fill="green" clip-path="url(#myClip)"/>常见属性
id：裁剪路径的唯一标识符。clipPathUnits：裁剪路径的坐标系统。- 例如：
clipPathUnits="userSpaceOnUse"，表示使用用户坐标系统。 objectBoundingBox：表示使用对象边界框坐标系统。userSpaceOnUse：表示使用用户坐标系统。
- 例如：
滤镜
- feBlend
- feColorMatrix
- feComponentTransfer
- feGaussianBlur
- ...