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).

Answer 1

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>

Answer 2

@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.