SVG feGaussianBlur 怎样分别设置横向与纵向模糊

SVG feGaussianBlur 分别设置横向与纵向模糊，只需给 stdDeviation 写两个非负数，例如 stdDeviation="8 2"。第一个数是x轴标准差，第二个数是y轴标准差；写成 "8 0" 则只在x方向模糊。只写 "8"，两个方向都会使用8。

规范地址：https://www.w3.org/TR/filter-effects-1/

如果想做一块横向舒展、上下边缘相对清楚的柔光，却发现整个形状都变软，我会先看属性是否仍是单值，而不是继续增大模糊量。下面的代码只提供可复制示例；配图解释参数关系，不把示例说成已经在本机运行的结果。

先把“两个方向”写成两个数

stdDeviation 表示高斯分布的标准差，不是CSS中的宽高，也不是一个有硬边界的模糊半径。数值越大，对应方向的扩散通常越明显；但不能把8理解成“向外最多延伸8像素”。

两个数放在同一个属性值里，不要自创 stdDeviationX="8"、stdDeviationY="2" 这样的SVG标记属性。DOM对象上有相关分量接口，并不意味着标记可以拆成这两个属性。负数也不是反向模糊，应在输入端拒绝。

我会先固定坐标单位，再比较两个方向

为了让示例中的8与2有明确参照，我会把 primitiveUnits 显式设成 userSpaceOnUse。这样滤镜图元参数使用当前用户坐标单位。filterUnits 则控制滤镜区域的坐标解释，不应拿它代替图元单位设置。

下面是可放进HTML页面的独立SVG片段。示例图形处于 400×200 的viewBox内，没有旋转或非均匀变换；在这组条件下，x方向对应页面横向，y方向对应纵向。

预期表现是蓝色矩形的横向扩散强于纵向扩散。这只是代码语义所描述的效果，不是某个浏览器版本的实测数据。改成 "2 8"，两轴的模糊强弱互换；不需要交换矩形的宽高。

当外层SVG缩放时，用户单位会映射到显示尺寸。若加入旋转或非均匀缩放，应连同坐标变换一起解释方向与视觉比例，不能保证某个轴永远等同于屏幕水平像素。

动态修改时，一次提交两个轴的参数

如果需要接入两个滑块，我倾向把更新逻辑集中到一个函数里：先确认两个值都是有限非负数，再一次写入 stdDeviation。这样不会出现横向控件更新成单值，顺手把纵向设置覆盖掉的问题。

function setAxisBlur(node, sx, sy) {
  // 只接受有限非负数；30是本示例的控件上限，并非SVG规范上限。
  if (![sx, sy].every(v =>
      typeof v === "number" && Number.isFinite(v) && v >= 0 && v 

滑块的 value 通常是字符串，调用前应明确转换并处理空输入，不要假定它本来就是数字。示例的0到30只是控件策略；如果允许更大值，还应根据显示需求调整区域与性能预算。

若同一页面有多个独立组件，滤镜ID与图元ID也应各自唯一。重复使用 axis-blur 会让引用难以判断，不能仅凭组件内部定义顺序猜测浏览器最终引用哪个节点。

方向不对时，我按引用、数值、坐标依次排查

滤镜区域之外的输出会被裁切，但扩大区域不会改变两个轴的标准差。对本题而言，这两个问题要分开处理：方向由双值及坐标系解释，能看到多大的扩散范围还受区域和裁剪限制。为了排错而把区域设得无限大也没有必要。

我会让 in="SourceGraphic" 保持明确，先在单个简单形状上确认参数约定，再接回包含多个图元的滤镜。若模糊对象换成 SourceAlpha，输入内容已经不同，不能把颜色变化误认作方向参数失效。

CSS的blur函数能直接写两个方向吗？

普通 blur() 不是这套双值语法。需要独立控制两轴时，可考虑SVG滤镜图元，再按场景通过引用使用。

把纵向设为0，是否连横向也一起关闭？

不会。仅一个轴为0时，只对另一个非零轴应用模糊；两个轴都为0时不产生模糊。

需要同时模糊文字和图形吗？

把滤镜应用在共同分组上会影响该组的渲染内容。如果文字仍需清晰可读，应把文字与需要模糊的装饰图形分开，而不是靠降低透明度补救。

我更愿意把这种双轴滤镜用于装饰性光晕或方向性柔化。需要精确锐边或保持正文可读时，则应保留未过滤的内容。先明确两个数各控制什么，后续调节就不必靠反复猜测方向。

参考：Filter Effects编辑草案、stdDeviation说明、primitiveUnits坐标说明。