UD5工具箱
SVG基础术语
SVG（Scalable Vector Graphics）
可缩放矢量图形，一种基于XML的开放标准二维矢量图形格式。SVG图形由数学路径定义，可以在任意分辨率下保持清晰，不会出现像素化问题。它支持矢量路径、形状、文本、渐变、动画等多种图形元素，是Web图形的重要标准之一。SVG最初由万维网联盟（W3C）于1999年开发，现已成为W3C推荐标准。由于其开放性和灵活性，SVG被广泛应用于网页设计、图标系统、数据可视化和印刷出版等领域。
ViewBox
SVG中的viewBox属性定义了SVG画布的坐标系统和可见区域。它接受四个参数：min-x、min-y、width和height，分别指定视图的左上角坐标和宽高。通过调整viewBox，可以控制SVG图形在容器中的缩放和定位方式，是实现响应式SVG的关键属性。例如，viewBox="0 0 1200 200"定义了一个宽度为1200、高度为200的坐标空间。viewBox的设置直接影响SVG在不同容器尺寸下的渲染行为，正确配置viewBox可以确保波浪在各种设备上都能保持正确的比例和显示效果。
Path（路径）
SVG路径元素，使用一系列命令和坐标定义任意形状的轮廓。路径命令包括M（移动到）、L（直线到）、C（三次贝塞尔曲线）、Q（二次贝塞尔曲线）、A（弧线）等。波浪图形主要使用C（三次贝塞尔曲线）命令来创建平滑的曲线效果。路径数据以字符串形式存储在d属性中，例如d="M0,100 C300,0 600,200 900,100"。通过合理组合不同的路径命令，可以创建从简单到复杂的各种形状。路径是SVG中最强大和灵活的图形元素之一。
波浪参数术语
振幅（Amplitude）
波浪的振幅是指波浪从平衡位置（通常是中线）到波峰或波谷的最大垂直距离。在SVG波浪生成器中，振幅值越大，波浪的起伏越高；振幅值越小，波浪越平缓。振幅的单位通常是像素（px），范围一般在1到200像素之间。在物理学中，振幅是描述波动强度的核心参数。在视觉设计中，振幅直接决定了波浪的存在感和视觉冲击力。小振幅的波浪给人以柔和、平静的感受，而大振幅的波浪则传达出力量和动感。在多层波浪设计中，不同层使用不同的振幅值可以创造出丰富的层次感。
频率（Frequency）
波浪的频率是指在单位长度（通常是SVG的宽度）内包含的完整波浪周期数量。频率越高，波浪越密集；频率越低，波浪越稀疏。频率通常以无量纲数值表示，范围在0.1到10之间。频率与波长成反比关系，即频率越高，波长越短。在视觉设计中，频率控制着波浪的节奏感和纹理密度。低频率的波浪呈现出舒缓流畅的线条感，适合作为大面积的背景装饰。高频率的波浪则形成密集的纹理效果，适合用于营造水面波光等细腻的视觉效果。合理搭配不同频率的波浪层，可以创造出自然且富有变化的复合波浪图形。
波长（Wavelength）
波长是指一个完整波浪周期的水平距离。它与频率成反比关系：波长 = SVG宽度 / 频率。波长决定了波浪在水平方向上的伸展程度。较长的波长产生宽而舒缓的波浪，较短的波长产生窄而密集的波浪。在自然界中，波长是描述波动特征的重要物理量。在SVG波浪设计中，波长与频率的概念紧密相关，通过调整频率参数即可间接控制波长。理解波长的概念有助于您更精确地控制波浪的外观，尤其是在需要波浪与特定宽度的容器完美匹配时，可以通过计算波长来确定最佳的频率参数。
相位（Phase）
相位描述波浪在其周期中的起始位置。通过调整相位参数，可以将波浪在水平方向上平移，而不会改变其形状。相位通常以角度（0到360度）或弧度表示。在多层波浪叠加时，调整不同层的相位可以创造出更自然、更随机的视觉效果。相位差是指两个波浪之间的相位差异，当两个频率相同的波浪存在特定的相位差时，会产生干涉效应，使叠加后的波形发生变化。在SVG波浪生成器中，通过调整各层波浪的相位，可以避免所有层的波峰和波谷完全对齐，从而创造出更加丰富和自然的视觉层次。
颜色与效果术语
线性渐变（Linear Gradient）
沿直线方向从一种颜色平滑过渡到另一种颜色的渐变效果。线性渐变由起始点、结束点和过渡颜色定义。在SVG中，线性渐变使用linearGradient元素定义，可以设置渐变角度、颜色停止点和插值方法。线性渐变常用于创建天空、海洋等自然场景的背景效果。在线性渐变中，颜色停止点（stop）决定了渐变过程中颜色变化的关键位置和对应的颜色值。通过合理设置多个颜色停止点，可以创建多色渐变效果。渐变的传播方式可以设置为pad（填充）、reflect（反射）或repeat（重复），为不同的设计需求提供灵活的选择。
径向渐变（Radial Gradient）
从中心点向外辐射的圆形渐变效果。径向渐变由中心点、半径和过渡颜色定义。在SVG中，径向渐变使用radialGradient元素定义。径向渐变适合创建光源效果、球体效果或聚焦效果。径向渐变的焦点（fx, fy）可以偏离中心点，产生偏心的渐变效果，模拟自然光照的不均匀分布。在波浪设计中，径向渐变常用于创建带有聚光效果的特殊波浪，使波浪的中心区域更亮而边缘逐渐变暗，增加视觉深度和立体感。
不透明度（Opacity）
不透明度控制元素的透明程度，范围从0（完全透明）到1（完全不透明）。在多层波浪叠加中，通过设置不同层的不透明度，可以让底层波浪透过上层可见，增加图形的深度感和层次感。不透明度可以应用于整个元素或单个颜色通道。在CSS中，不透明度可以通过opacity属性设置，也可以通过RGBA颜色模式中的A（Alpha）通道精确控制。在SVG中，opacity属性和fill-opacity属性可以分别控制元素整体和填充部分的不透明度。合理使用不透明度是创造多层次视觉效果的关键技巧。
动画术语
CSS动画（CSS Animation）
使用CSS的@keyframes规则定义的动画效果。CSS动画可以在不使用JavaScript的情况下创建平滑的过渡和运动效果。在SVG波浪中，CSS动画通常用于创建波浪的水平流动效果，通过在@keyframes中改变波浪路径的水平位置来实现。CSS动画的主要优势在于性能出色，浏览器可以利用GPU加速来渲染动画，即使在移动设备上也能保持流畅的帧率。CSS动画还支持animation-fill-mode属性，控制动画开始前和结束后的元素状态，以及animation-play-state属性，控制动画的播放和暂停。
缓动函数（Easing Function）
控制动画速度变化曲线的数学函数。常用的缓动函数包括：linear（匀速）、ease-in（加速）、ease-out（减速）和ease-in-out（先加速后减速）。在波浪动画中，选择合适的缓动函数可以让动画看起来更自然、更流畅。除了这四种基本缓动函数，CSS还支持cubic-bezier()自定义缓动函数，允许您通过调整两个控制点来创建任意的速度变化曲线。在SVG波浪动画中，ease-in-out缓动函数通常用于流动效果，使波浪在进入和离开视口时自然减速，中间阶段加速，模拟真实水流的运动特性。
帧率（Frame Rate）
动画每秒更新的次数，单位为FPS（Frames Per Second）。流畅的动画通常需要60FPS的帧率。CSS动画由浏览器渲染引擎自动处理帧率，通常能够达到60FPS的流畅效果。SVG波浪动画使用CSS实现，因此能够获得浏览器的最佳性能优化。低于30FPS的帧率会导致动画出现明显的卡顿感，而60FPS则能提供人眼难以察觉的流畅过渡。在性能受限的设备上，浏览器可能会自动降低动画帧率以节省资源。通过使用transform和opacity等合成属性来实现动画，可以最大限度地利用浏览器的硬件加速能力，保持高帧率运行。
技术术语
贝塞尔曲线（Bezier Curve）
由Pierre Bezier提出的参数化曲线，广泛应用于计算机图形学中。SVG波浪主要使用三次贝塞尔曲线（Cubic Bezier Curve），它由起点、终点和两个控制点定义。通过调整控制点的位置，可以创建各种平滑的曲线形状。贝塞尔曲线的优势在于可以用较少的数学数据描述复杂的曲线形状，从而减小文件体积。三次贝塞尔曲线的数学表达式为B(t) = (1-t)³P₀ + 3(1-t)²tP₁ + 3(1-t)t²P₂ + t³P₃，其中P₀和P₃是曲线的端点，P₁和P₂是控制点。通过调整控制点的坐标，可以精确控制曲线的弯曲程度和方向，这正是SVG波浪生成器创建平滑波浪的数学基础。
矢量图形（Vector Graphics）
使用数学方程描述图形元素的图形格式。与位图（栅格图形）不同，矢量图形由路径、形状和颜色等数学定义组成，可以无损缩放。常见的矢量格式包括SVG、EPS、AI和PDF。矢量图形适合创建图标、Logo、插图等需要在不同尺寸下保持清晰的图形。矢量图形的主要优势包括：无限缩放不失真、文件体积小、可编辑性强、打印质量高。在Web领域，SVG是唯一的原生矢量图形格式，可以直接在浏览器中渲染，无需插件或转换。对于波浪这类需要平滑曲线的图形，矢量格式比位图格式具有明显的优势。
响应式设计（Responsive Design）
一种网页设计方法，使页面能够自动适应不同的屏幕尺寸和设备类型。在SVG波浪的上下文中，响应式设计意味着波浪图形能够根据容器的大小自动缩放，保持正确的比例和清晰度。实现响应式SVG的关键是正确设置viewBox和preserveAspectRatio属性。viewBox定义了SVG的内部坐标空间，而preserveAspectRatio控制SVG在容器中如何缩放和对齐。常见的preserveAspectRatio值包括xMidYMid meet（保持比例居中缩放）和none（拉伸填满容器）。在实际应用中，通常将SVG元素的宽度设置为100%，配合viewBox实现完全响应式的波浪效果。
DOM（Document Object Model）
文档对象模型，是HTML和XML文档的编程接口。在浏览器中，SVG图形被解析为DOM树的一部分，可以使用JavaScript进行动态操作。虽然SVG波浪生成器主要输出静态SVG代码，但生成的SVG元素可以通过DOM API进行进一步的程序化控制和交互。例如，可以通过document.querySelector获取SVG元素，然后修改其属性或子元素。DOM操作允许开发者在运行时动态改变波浪的参数、颜色甚至路径数据，为创建交互式波浪效果提供了基础。然而，频繁的DOM操作可能会影响性能，因此在需要高频更新的场景中，建议使用requestAnimationFrame或CSS动画来替代直接的DOM操作。
XML（Extensible Markup Language）
可扩展标记语言，一种用于描述数据结构和内容的标记语言标准。SVG文件的底层格式就是XML，这意味着SVG代码具有良好的结构化特征，可以被文本编辑器直接查看和编辑，也可以被搜索引擎索引。XML的严格语法规则确保了SVG代码的规范性和可移植性。在SVG波浪生成器中，生成的代码遵循SVG的XML语法规则，包括正确的标签闭合、属性引号和命名空间声明。了解XML的基本概念有助于您在需要时手动编辑SVG代码，进行更精细的调整和优化。