CODEWITHSUNDEEP
javascripthtmlcsssvg
Issam Mani
Issam Mani

Reputation: 91

SVG lines not rendering properly

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.dev/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 : [rectangle with some thinner lines

Upvotes: 2

Views: 3603

Answers (3)

Robert Longson
Robert Longson

Reputation: 124229

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.dev/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 e.g.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:svgjs="http://svgjs.dev/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>

Upvotes: 3

Carsten Massmann
Carsten Massmann

Reputation: 28226

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>

Upvotes: 1

Rounin
Rounin

Reputation: 29521

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>

Upvotes: 0

Related Questions