问题
I'm currently trying to draw some graphics in svg, the paper size is A4, 1 logic unit stands for 1mm. So I set the viewport to be 297mmx210mm, viewbox as 297x210. The problem now is that stroke-width of the graph I draw is no longer 1 pixel. For example,
<!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>
These 3 lines above have exact the same line width even I set its stroke-width as "1px". Is it still possible to draw a 1 pixel width line in such setting?
回答1:
Try this:
<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" is an SVG 1.2 Tiny feature that forces the stroke width to be exactly what you specify, no matter what scaling or unit transforms are in effect. It is supported by FF and Chrome (maybe others) but not IE (so far) unfortunately. If you can live with that, then it is the simplest solution to your problem.
来源：https://stackoverflow.com/questions/17584348/draw-1-pixel-stroke-width-graph-in-a-a4-svg-drawing