Menu
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?
704
You can add a stroke with stroke="black" stroke-width="10" and then adjust your viewBox accordingly.
The stroke-width attribute is a presentation attribute defining the width of the stroke to be applied to the shape. You can use this attribute with the following SVG elements: <altGlyph> <circle> <ellipse>
Using fill sets the color inside the object and stroke sets the color of the line drawn around the object. You can use the same css color naming schemes that you use in HTML, whether that's color names (that is red ), rgb values (that is rgb(255,0,0) ), hex values, rgba values, etc.
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.
146
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
