9

我目前正在尝试在 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 像素宽的线？

4

1 回答 1

24

尝试这个：

<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（到目前为止）不支持它。如果您可以忍受，那么这是解决您问题的最简单方法。

于 2013-07-11T15:22:59.240 回答