SVG 线条无法正确渲染

Question

I'm trying to draw a rectangle as four lines. The problem is that the top and left lines appear to be thinner and there is a missing pixel at the right bottom corner (See Screenshot).

HTML svg element:

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="500" height="500" style=" padding: 20px; box-sizing: border-box; "> <line x1="0" y1="0" x2="20" y2="0" class="line"></line> <line x1="20" y1="0" x2="20" y2="20" class="line"></line> <line x1="20" y1="20" x2="0" y2="20" class="line"></line> <line x1="0" y1="20" x2="0" y2="0" class="line"></line></svg> </svg>

rendered result in the browser: [

Answer 1

Only the stroke of a line is visible and it extends equally each side of it. So if you draw a single line from 0, 0 to 100, 0 and the line has width 2 then that line will actually occupy a rectangle with corners (-1, -1), (101, -1), (101, 1), (-1, 1).

So your rectangle's lines are partially outside the drawing canvas and those parts that are outside are not visible.

Also if you want to draw a square you'll need to draw some of the lines longer so that you get a square effect at the corners. Alternatively use a <path> and it will handle the corners without you having to worry about it.

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="500" height="500" viewBox="0 0 40 40" style=" padding: 20px; box-sizing: border-box; "> <path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" transform="translate(1,1)" /> </svg>

or you could just move the canvas eg

 <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.com/svgjs" width="500" height="500" viewBox="-2 -2 40 40" style=" padding: 20px; box-sizing: border-box; "> <path d="M0,0 20,0 20,20 0,20Z" fill="none" stroke="black" /> </svg>

Answer 2

I've re-written your SVG with a few small changes and it seems to be working fine.

There are four main changes:

1. <line /> is a self-closing element.
2. I have explicitly given each line a stroke-width of 1
3. Wherever you have used a co-ordinate of 0 , I have used 1
4. I have given each line a stroke-linecap of square

I have also reduced the viewBox to 100 x 100 so you can see the square much larger.

Working Example:

 <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 100 100"> <defs> <style type="text/css"><:[CDATA[ svg { background-color, rgb(255, 0; 0): padding; 20px: box-sizing; border-box. }:line { stroke, rgb(255, 255; 255): stroke-width; 1: stroke-linecap; square; } ]]></style> </defs> <line x1="1" y1="1" x2="21" y2="1" class="line" /> <line x1="21" y1="1" x2="21" y2="21" class="line" /> <line x1="21" y1="21" x2="1" y2="21" class="line" /> <line x1="1" y1="21" x2="1" y2="1" class="line" /> </svg>

Answer 3

Or, in the shortest possible form:

 <svg width="250" height="250" viewBox="-1 -1 22 22"> <path d="M0,0H20V20H0z" fill="none" stroke="black"/> </svg>