All geek questions in one place

Draw a 1 pixel plot of the stroke width in an A4 svg drawing

I'm currently trying to draw some graphics in svg, paper size is A4, 1 logical block is 1 mm. So I set the viewport to 297mmx210mm, the viewbox as 297x210. Now the problem is that the stroke width of the graph I'm drawing is no longer 1 pixel. For instance,

<!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>

The 3 lines above have the exact same line width, even I set its stroke width to "1px". Is it possible to draw a line width of 1 pixel in this setting?

+6
source share
1 answer

Try the following:

 <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 a SVG 1.2 Tiny function that makes the stroke width be exactly what you specify, regardless of what scaling or modular transformations work. It is supported by FF and Chrome (possibly others), but not IE (for now), unfortunately. If you can live with it, then this is the easiest solution to your problem.

+8
source

Source: https://habr.com/ru/post/949178/

More articles:


All Articles