svg_reference

SVG 元素参考 (更新)

常用 SVG 元素

本参考提供了常用 SVG 元素的概述及其关键属性。有关完整的详细信息，请始终查阅 MDN Web Docs 或 W3C 上最新的 SVG 规范。

Element	Description	Common Attributes

结构与分组

<svg> | SVG 片段的根元素。 | width, height, viewBox, preserveAspectRatio, x, y, xmlns (http://www.w3.org/2000/svg) <g> | 组合多个元素。应用于 <g> 的变换会影响其所有子元素。 | id, transform, fill, stroke, opacity + 表现属性。 <defs> | 可重用定义的容器（渐变、图案、滤镜、符号）。不直接渲染。 | <use> | 实例化已定义的元素（例如，来自 <defs> 或其他具有 id 的元素）。 | href (或为了向后兼容的 xlink:href), x, y, width, height, transform。 <symbol> | 定义由 <use> 使用的图形模板对象。具有 viewBox 和 preserveAspectRatio。 | id, viewBox, preserveAspectRatio。 <a> | 在 SVG 元素周围创建超链接。 | href, target, download。

形状

<rect> | 定义矩形。 | x, y, width, height, rx, ry + 表现属性。 <circle> | 定义圆形。 | cx, cy, r + 表现属性。 <ellipse> | 定义椭圆。 | cx, cy, rx, ry + 表现属性。 <line> | 定义直线。 | x1, y1, x2, y2 + 表现属性。 <polyline> | 定义由连接的直线组成的开放图形。 | points + 表现属性。 <polygon> | 定义由连接的直线组成的闭合图形。 | points, fill-rule + 表现属性。 <path> | 使用路径命令（直线、圆弧、曲线）定义复杂形状。 | d (路径数据), pathLength, transform + 表现属性。

文本

<text> | 渲染文本。 | x, y, dx, dy, rotate, textLength, lengthAdjust, text-anchor + 字体/填充/描边属性。 <tspan> | <text> 或其他 <tspan> 的子元素，用于对文本的一部分设置样式或定位。 | 类似于 <text>，加上相对于当前文本位置的 dx, dy。 <textPath> | 沿路径排列文本。 | href (引用路径), startOffset, method, spacing。

样式与绘制

<style> | 直接在 SVG 内容中嵌入 CSS 样式表。 | type="text/css"。 表现属性 (Presentation Attributes) | 许多元素接受诸如 fill, stroke, stroke-width, opacity, font-size 等属性，作为 CSS 的替代方案。 | (众多，应用于特定元素)

渐变与图案

<linearGradient> | 定义线性颜色渐变。 | id, x1, y1, x2, y2, gradientUnits, gradientTransform, spreadMethod。 <radialGradient> | 定义径向颜色渐变。 | id, cx, cy, r, fx, fy, fr, gradientUnits, gradientTransform, spreadMethod。 <stop> | 渐变中的颜色停止点。 | offset, stop-color, stop-opacity。 <pattern> | 定义用于填充或描边元素的图形图案。 | id, x, y, width, height, patternUnits, patternContentUnits, patternTransform, viewBox, preserveAspectRatio。

裁剪与遮罩

<clipPath> | 定义用于限制元素可见区域的裁剪路径。 | id, clipPathUnits。 <mask> | 定义 alpha 遮罩以控制透明度。 | id, maskUnits, maskContentUnits, x, y, width, height。

滤镜 (全部定义在 <filter> 中)

<filter> | 滤镜原语的容器。 | id, x, y, width, height, filterUnits, primitiveUnits。 <feGaussianBlur> | 应用高斯模糊。 | in, stdDeviation, result。 <feOffset> | 偏移输入图像。 | in, dx, dy, result。 <feMerge> | 组合多个输入（通常是原始图形及其阴影/发光）。 | result。包含 <feMergeNode> 子元素。 <feMergeNode> | 指定 <feMerge> 的输入。 | in。 <feColorMatrix> | 对颜色应用矩阵变换。 | in, type (matrix, saturate, hueRotate, luminanceToAlpha), values, result。 <feBlend> | 混合两幅图像。 | in, in2, mode (normal, multiply, screen 等), result。 <feComposite> | 使用 Porter-Duff 操作组合两幅图像。 | in, in2, operator (over, in, atop, xor 等), k1, k2, k3, k4, result。 <feFlood> | 用颜色/不透明度填充滤镜子区域。 | flood-color, flood-opacity, result。 <feImage> | 使用外部图像或另一个 SVG 图形作为输入。 | href (或 xlink:href), preserveAspectRatio, result。 <feTurbulence> | 生成 Perlin 噪声。 | type (fractalNoise, turbulence), baseFrequency, numOctaves, seed, stitchTiles, result。 <feDisplacementMap> | 使用另一幅图像作为置换贴图来扭曲图像。 | in, in2, scale, xChannelSelector, yChannelSelector, result。 <feDiffuseLighting> | 模拟漫射光。 | in, surfaceScale, diffuseConstant, kernelUnitLength, result。需要光源子元素。 <feSpecularLighting> | 模拟镜面光。 | in, surfaceScale, specularConstant, specularExponent, kernelUnitLength, result。需要光源子元素。 (光源: <feDistantLight>, <fePointLight>, <feSpotLight>)

动画 (SMIL - Synchronized Multimedia Integration Language) 注意：在新项目中通常优先使用 CSS Animations 和 Web Animations API，但 SMIL 仍然受支持。

<animate> | 随时间变化为一个属性设置动画。 | attributeName, from, to, by, dur, repeatCount, fill 等。 <animateMotion> | 沿运动路径为一个元素设置动画。 | path, keyPoints, rotate, dur 等。 <animateTransform> | 为变换属性 (transform) 设置动画。 | type (translate, scale, rotate, skewX, skewY), from, to, by, dur 等。 <set> | 在指定持续时间内设置属性值（离散动画）。 | attributeName, to, begin, dur。

其他

<image> | 嵌入栅格图像 (PNG, JPEG, GIF) 或其他 SVG 文件。 | href (或 xlink:href), x, y, width, height, preserveAspectRatio。 <title> | 为元素提供人类可读的标题（通常显示为工具提示，对可访问性很重要）。 | (文本内容) <desc> | 为元素提供更长、更详细的描述（对可访问性很重要）。 | (文本内容) <!-- ... --> | 注释，解析器忽略。 |

废弃/不常用元素

<altGlyph>, <altGlyphDef>, <altGlyphItem> | 已废弃。与字体字形替换相关。 <font>, <font-face> 等 | SVG 字体。通常优先使用 CSS Web 字体 (@font-face)。 <tref> | 已废弃。使用 <use> 引用文本内容。

这不是一个详尽的列表。SVG 是一门丰富的语言。请查阅 MDN Web Docs 获取最新、最全面的 SVG 文档。