I'd like to draw a rectangle with a top and bottom border (as part of a

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

CodePudding user response：

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>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

CodePudding user response：

@MichaelMullany has given a proper workaround using two lines. 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>

<iframe name="sif3" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Tested with Google Chrome Version 95.0.4638.69 on Linux.