在 A4 svg 绘图中绘制 1 像素笔画宽度图答案

【问题标题】：Draw 1 pixel stroke-width graph in a A4 svg drawing在 A4 svg 绘图中绘制 1 像素笔画宽度图
【发布时间】：2013-07-09 04:36:23
【问题描述】：

我目前正在尝试在svg中绘制一些图形，纸张尺寸为A4，1个逻辑单元代表1mm。所以我将视口设置为 297mmx210mm，viewbox 设置为 297x210。现在的问题是我绘制的图形的笔画宽度不再是 1 像素。例如，

<!DOCTYPE html>
<html>
<body>
<svg width="297mm" height="210mm" viewBox='0 0 297 210' style="border: 1px solid #cccccc;">
    <path stroke="black" fill="none" stroke-width='1' d='M 10 10 L 60 10'/>
    <path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30'/>
    <path stroke="black" fill="none" d='M 10 50 L 60 50'/>
</svg>
</body>
</html>

上面这 3 行的线宽完全相同，即使我将其笔画宽度设置为“1px”。在这样的设置下还能画出1像素宽的线吗？

【问题讨论】：

会 stroke-width='0.762' 工作吗？
我认为纸张没有像素。在屏幕上使用屏幕单位或打印 svg 并观察细线出现...
默认情况下 1mm = 3.779527559 像素，所以如果我设置 stroke-width='0.26458' 线宽实际上是 1 像素。但是对于第二行，因为我已经将笔画宽度设置为“1px”。它应该以 1 像素宽度绘制，对吧？
问题是如果我使用英寸而不是毫米进行绘图，为了绘制一条 1 像素宽度的线，我必须重新定义我绘图中每个图形的笔画宽度。这很烦人。

标签： javascript svg pixel

【解决方案1】：

试试这个：

<path stroke="black" fill="none" stroke-width='1px' d='M 10 30 L 60 30' vector-effect="non-scaling-stroke"/>

vector-effect="non-scaling-stroke" 是 SVG 1.2 Tiny 的一项功能，它强制笔划宽度与您指定的完全一致，无论使用何种缩放或单位变换。不幸的是，FF 和 Chrome（可能还有其他）支持它，但不支持 IE（到目前为止）。如果你能忍受，那么这是解决你问题的最简单的方法。

【讨论】：

很棒的功能
如果您希望笔触在高 dpi 屏幕上的 screen 像素中，则需要使用 javascript 除以 window.devicePixelRatio。 IE。我有window.devicePixelRatio = 1.25，所以stroke-width='0.8px'