-
SVG symbol 用于保存可复用图形模板，use 负责创建实例。本文用圆点和徽章示例说明 href、viewBox、x/y、width/height 与 preserveAspectRatio 的分工。
-
SVG 的 preserveAspectRatio 用 meet 保留完整 viewBox 并允许留白，用 slice 铺满 viewport 并允许裁切；再结合 xMin、xMid、xMax 与 Y 方向对齐关键字控制结果位置。
-
SVG 图形想要等比填满容器，关键是同时设置合理的 viewBox 和 preserveAspectRatio：meet 保留完整图形，slice 铺满但可能裁切，none 才会允许非等比拉伸。本文按留白、裁切、变形和对齐问题给出可直接套用的写法。
-
从几何边界、alpha/luminance 和交互区域三个角度，对比 SVG clipPath 与 mask 的透明度处理，给出可直接改写的最小示例。
-
用一个 SVG clipPath 组合圆形、矩形和路径等多个裁剪形状，再通过 clip-path 让目标分组共享显示范围；同时解释 userSpaceOnUse、objectBoundingBox、固有几何边界和 pointer-events 的关系。
-
SVG markerUnits 决定 markerWidth、markerHeight 和标记内容使用哪套坐标系。本文比较 strokeWidth 与 userSpaceOnUse，说明它们如何影响箭头随 stroke-width 缩放，并给出 viewBox、refX、refY 的组合排查方法。
-
SVG marker 端点图形沿路径方向旋转，关键是 orient=auto；双向连线使用 auto-start-reverse，再用 refX/refY 和 markerUnits 校准锚点与缩放。
-
从图块边界、内部内容坐标和 viewBox 三个层面，说明 SVG patternUnits 与 patternContentUnits 的差异、默认值及配置选择。
-
SVG pattern 默认用 objectBoundingBox 解释平铺单元的 x、y、width、height，图形尺寸变化时图案也会跟着缩放。本文用 userSpaceOnUse 固定重复图案大小，并区分 patternContentUnits、viewBox 与 patternTransform 的作用。
-
SVG位移滤镜的scale按通道值相对0.5的差放大采样偏移。本文用固定色示例说明偏移范围、反向采样、坐标单位和滤镜裁切，避免把scale直接当作屏幕移动距离。
-
SVG feDisplacementMap 的 xChannelSelector 和 yChannelSelector 分别决定水平、垂直位移读取的颜色通道。本文说明 R、G、B、A 的选择边界、默认值、scale 与 0.5 中性值的关系，并给出可直接改写的 SVG 示例。
-
SVG 的 feGaussianBlur 会向图形边界外扩散；如果 filter 区域太小，扩散结果会在区域边界被裁剪。本文说明默认区域、filterUnits 和排查方法。
-
SVG feGaussianBlur可用stdDeviation的两个数分别控制x轴和y轴模糊。本文说明单值与双值、零值、用户坐标单位和动态更新方法，并给出方向不符时的排查顺序。
-
JavaScript Element.setPointerCapture 可以把后续指针事件继续交给拖拽元素，即使指针已经移出元素。本文说明 pointerId、pointerup、pointercancel、releasePointerCapture 与 touch-action 的配合方式。
-
本文说明如何使用 SVGGeometryElement.getTotalLength() 取得 SVG 路径总长度，区分 user units、CSS 尺寸与 pathLength，并处理路径动态修改和元素选择边界。
