探究生成一个 svg图像，stroke-width 的属性值为小数时在JS 生效但 TS 环境下不生效的现象

const rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect");
rectElement.setAttribute("x", rect.x);
rectElement.setAttribute("y", rect.y);
rectElement.setAttribute("width", rect.width);
rectElement.setAttribute("height", rect.height);
rectElement.setAttribute("fill", rect.color);
rectElement.setAttribute("fill-opacity", 0.8);
rectElement.setAttribute("stroke", "#000");
rectElement.setAttribute("stroke-width", "0.0001");

这是我在用 OpenSeadragon + SVG Overlay 时发现的一个现像！我们来一起剖析下 JS 和 TS 环境下 stroke-width 不生效的现象。

🧠 问题分析

JS 环境下矩形边框会随着 Zoom 缩放而自动变化，但在 TypeScript 环境中却不生效，尤其是 stroke-width 被设置成 "0.0001" 后 无法呈现预期效果。

这个问题可能来自以下几个层面：

1. TypeScript 类型检查导致属性未正确赋值

在 TS 中，如果你使用严格的 DOM 类型约束，比如使用了 SVGRectElement 类型，并通过类型推导赋值属性，它可能会忽略某些非标准或低精度数值，例如 "0.0001" 被处理或优化掉。

2. tsconfig 设置影响

TypeScript 的构建配置（比如 "strict": true 或 "noImplicitAny"）有可能在某些构建工具链中会剔除掉一些非标准行为或转译方式。

3. stroke-width 设置过小，渲染误差影响

SVG 中 stroke-width="0.0001" 在某些浏览器或渲染器下可能会直接渲染为0，或者根本不渲染。（但这里排除这个可能）JS 下你可能看到的是某种“渲染误差”或者在 Canvas 叠加中被放大看到了效果。

✅ 解决方案

✅ 方法一：使用 vector-effect="non-scaling-stroke" 来让边框随 Zoom 缩放

rectElement.setAttribute("vector-effect", "non-scaling-stroke");
rectElement.setAttribute("stroke-width", "1"); // 用正常宽度

vector-effect="non-scaling-stroke" 是 SVG 的标准属性，它可以让 stroke 不随着 viewBox 缩放。你无需用很小的 stroke-width 来 hack 缩放。就能达成想要的效果

这个写法是推荐方式，不但更语义化，而且跨浏览器兼容性也更好。ts 环境下，在缩放过程中既实现了小数级别的stroke-width值，又保持缩放过程中的宽度一致

rectElement.setAttribute("vector-effect", "non-scaling-stroke");
rectElement.setAttribute("stroke-width", "0.8"); // 可以更小

✅ 方法二：确认 TypeScript 类型和 DOM 操作是否正确

确保你写的 TS 是这样：

const rectElement = document.createElementNS("http://www.w3.org/2000/svg", "rect") as SVGRectElement;

如果你不加 as SVGRectElement，TS 可能会将它视作一般的 Element，某些属性在编译时可能会被优化或报类型错。

✅ 方法三：调试编译后的 JS

你可以把 TS 编译后的 JS 打开，确认最终生成的代码有没有这一行：

rectElement.setAttribute("stroke-width", "0.0001");

如果没有，那就是 TS 编译器/构建工具链把这行代码优化掉了。

✅ 方法四：强制指定类型 + 断点验证

const strokeWidth = "0.0001";
rectElement.setAttribute("stroke-width", strokeWidth);
console.log(rectElement.getAttribute("stroke-width")); // 看看是不是设置上了

💡 Bonus Tips（Bonus加分项）

如果你有多个矩阵需要渲染，可以结合 d3.js 一起用 enter-update-exit 模式渲染 rect，会更方便动态更新缩放。

🧸 总结一句话

JS 能跑，TS 不行，多半是类型系统、构建流程或者渲染边缘值的问题。推荐用标准属性 vector-effect="non-scaling-stroke" 替代极小的 stroke-width，更稳更可控！