CODEWITHSUNDEEP
svgstroke-dasharray
maiermic
maiermic

Reputation: 4984

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

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

rendered PNG

I expect

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

fixed image

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

Upvotes: 0

Views: 384

Answers (2)

maiermic
maiermic

Reputation: 4984

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

Upvotes: 1

Michael Mullany
Michael Mullany

Reputation: 31715

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>

Upvotes: 2

Related Questions