-
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,并处理路径动态修改和元素选择边界。
-
DocumentFragment 插入页面前可以直接使用 querySelector、querySelectorAll 和 getElementById 查询内部元素。关键是把查询放在片段仍持有子节点时,并理解插入后片段会被清空、已取得的元素引用仍然有效。
-
DocumentFragment插入时移动的是子节点,片段对象仍保留。通过节点引用、返回值和重复渲染示例,说明为什么片段变空,以及重新构建、深克隆与安全文本写入的边界。
-
Range.intersectsNode() 判断的是节点与 Range 是否有交集,不等于整个节点内容都被包含。本文从 DOM 边界点解释两者差异,并给出完整包含、文本命中和跨文档节点的选择方式。
-
JavaScript Range.comparePoint 返回 -1、0、1,用来判断节点加 offset 组成的坐标点位于选区之前、范围内部还是之后。本文同时比较 isPointInRange 与 compareBoundaryPoints 的适用边界。
-
TextMetrics.width 表示文本的行内推进宽度,而 actualBoundingBoxLeft 与 actualBoundingBoxRight 描述相对于 Canvas 对齐点的可见字形边界。本文用公式和原创 Canvas 示例说明两者的区别及选用场景。