Javascript 如何在不考虑位置的情况下获得一致的笔划宽度？

问题的本质是，当我移动SVG元素时，行的宽度会发生变化

我在浏览器环境中工作，需要清晰的线条（无抗锯齿），因此形状渲染设置为CrispEdge。例如，您可能有

“d M 0 0 L 10 0 L 10 10 L 0 10 z”

定义正方形的步骤，将样式设置为

“填充：无；笔画：黑色；笔画宽度：1px；形状渲染：CrispEdge'

然后使用translate（）用鼠标拖动它。它可以工作，但随着正方形的移动，线条的厚度会跳跃一个像素，我希望厚度保持不变

我想我知道为什么会这样，但我找不到任何方法来阻止它。发生这种情况（我认为）是由于相对于viewBox的坐标映射到相对于物理监视器像素的坐标的方式。当一个像素宽（用SVG术语）的线映射到监视器时，它可能跨越几个像素，也可能不跨越几个像素，因此它可能会变厚或变薄（屏幕）像素

我尝试过处理视图框大小与绘图区域大小的比率，将转换量四舍五入为整数或整数+0.50，但这种解决方案似乎不可行，因为它涉及到浏览器中的缩放级别。矢量效果：非缩放笔划也不能修复它

有没有一种方法可以告诉SVG将所有路径视为一维几何形状，并对所有路径使用特定的笔？换句话说，我希望用来绘制所有内容的笔“随着缩放缩放”，而不是在绘制线后缩放

请只吃香草JS

您可以通过运行下面的代码来测试我的意思。单击正方形并将其拖动（无触摸设备）。请注意，在浏览器缩放的某些级别上，它可能表现得很好，而不是我所描述的那样

发生了一些奇怪的事情。svg元素（正方形）一开始看起来是统一的，所有边的宽度都相同。它只会随着鼠标移动而移动，当鼠标移动一个整屏像素（而不是小数点）时，该事件（大概）就会发生。因此，如果正方形以这种方式开始移动，那么它将移动整个屏幕像素并保持与屏幕像素对齐

跟进…问题不在于屏幕CTM。我测试了这个倒数真的是一个倒数；也就是说，CTM x CTM^{-1}是我尝试的每个值的标识。matrixTransform（getScreenCTM（）.inverse（））提供的值在输入中是线性的（或者是浮点数允许的线性）

var theSquare={
x:10，
y:10
};
var initialSquare={
x:10，
y:10
};
var边长=10；
var initialX=0；
var初始值=0；
var draggingSquare=0；
函数pointInRect（p，r）{
返回p.x>r.xLeft&p.xr.yTop&p.y

我发布这个“答案”是为了正式结束这个问题，并感谢罗伯特·朗森的关注

简而言之，我想做的事情不能在浏览器中完成，这是令人惊讶的，因为我只想画一条线。使用HTML画布标记会由于抗锯齿而产生模糊，SVG会产生抖动的线条。归根结底，浏览器无法提供设备像素级精度所需的信息

我在我的个人网站上发布了关于这个问题的讨论，并举例说明：

---

我正在Windows/FireFox上测试。我刚刚在Chrome上试用过。相同的行为侧长=10.5为您解决问题？不，我只是尝试侧长=10.5。我想这一定是关于如何将屏幕外位图（假设有）复制到监视器的问题。没有屏幕外位图。