use*_*554 7 javascript svg pixel
我目前正在尝试在svg中绘制一些图形,纸张尺寸为A4,1个逻辑单位代表1mm.所以我将视口设置为297mmx210mm,视图框设置为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像素宽的线？
Pau*_*eau 16
试试这个:
<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(目前为止).如果你可以忍受,那么这是解决你问题的最简单方法.