SVG: Unexpected pixel in stroke-dasharray at start corner of rect

Question

I'd like to draw a rectangle with a top and bottom border (as part of a database-flow diagram). Therefore, I use stroke-dasharray on rect like this:

<svg viewBox="-64 -24 178 73" xmlns="http://www.w3.org/2000/svg">
    <rect stroke-dasharray="50 25" width="50" height="25" fill="none"
          stroke="black"></rect>
    <text x="25" y="13" text-anchor="middle" dominant-baseline="central"
          font-size="10px" fill="#414141">Database
    </text>
</svg>

If you look closely at the top left corner of the rendered rectangle, you should see a notch (highlighted by the magenta circle). This pixel is not rendered in the other corners of the rectangle (highlighted by the green vertical line):

I expect

no notch
that the top line has the same length as the bottom line
that the top and bottom line start at the same x-position in the rendered image

That means, I expect the image to look like this (without the magenta circle and green line)

How to fix my SVG to look like this? Can this be done with stroke on rect? Why is the notch/pixel added in the first place?

Edit: I have this issue on Linux in Google Chrome Version 95.0.4638.69 and Firefox 94.0, but it seems to be a bug (see comments).

That seems to be a firefox bug - looks fine on Chrome latest/Win10 — Michael Mullany, Nov 21 '21 at 13:17
@MichaelMullany I have this issue on Linux in Google Chrome Version 95.0.4638.69 and Firefox 94.0, but not in Google Chrome on Android. So I guess, you are right that it is a bug and not intended. — maiermic, Nov 21 '21 at 18:05
@RobertLongson I actually wanted to understand the cause of the issue (intended behavior), but it seems to be a bug. — maiermic, Nov 21 '21 at 18:08
@MichaelMullany Thank you for pointing this out. I can confirm that it looks fine on Windows 10 in Google Chrome Version 95.0.4638.69 and Version 96.0.4664.45 — maiermic, Nov 21 '21 at 18:29

score 2 · Answer 1 · answered Nov 21 '21 at 13:21

That seems to be a firefox bug- looks fine in Chrome/Win. If you convert your rect to a path, it works fine.

<svg viewBox="-64 -24 178 73" xmlns="http://www.w3.org/2000/svg">
    <path d="M 0 0 h50 v 25 h-50 v-25" stroke-dasharray="50 25" fill="none"
          stroke="black"></path>
    <text x="25" y="13" text-anchor="middle" dominant-baseline="central"
          font-size="10px" fill="#414141">Database
    </text>
</svg>

score 1 · Answer 2 · edited Nov 22 '21 at 11:51

@MichaelMullany has given a workaround.(https://stackoverflow.com/a/70054910/1065654). Alternatively, you can use stroke-linecap="square" to extend the line and cover the notch

<svg viewBox="-64 -24 178 73" xmlns="http://www.w3.org/2000/svg">
    <rect stroke-dasharray="50 25" width="50" height="25" fill="none"
          stroke="black" stroke-linecap="square"></rect>
    <text x="25" y="13" text-anchor="middle" dominant-baseline="central"
          font-size="10px" fill="#414141">Database
    </text>
</svg>

Tested with Google Chrome Version 95.0.4638.69 on Linux.

SVG: Unexpected pixel in stroke-dasharray at start corner of rect

2 Answers2