代码之家 › 专栏 › 技术社区 › maiermic

SVG:矩形起始角的笔划dasharray中出现意外像素

stroke-dasharray svg

maiermic · 技术社区 · 4 年前

我想画一个有上下边框的矩形(作为 database-flow diagram ). 因此,我在rect上使用笔划dasharray,如下所示:

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

如果仔细观察渲染矩形的左上角,应该会看到一个缺口(由品红色圆圈高亮显示)。此像素不会在矩形的其他角渲染(由绿色垂直线高亮显示):

我想

无缺口
顶部线条的长度与底部线条的长度相同
顶部和底部线条在渲染图像中的相同x位置处开始

这意味着,我希望图像看起来像这样(没有品红色圆圈和绿色线条)

如何将我的SVG修复成这样?这可以用吗 stroke 在…上 rect ? 为什么首先添加凹口/像素?

编辑我在Google Chrome 95.0.4638.69版和Firefox 94.0版的Linux上遇到了这个问题,但它似乎是一个bug(请参阅 comments ).

0 回复 | 直到 4 年前

Michael Mullany 4 年前

这似乎是一个萤火虫bug——在Chrome/Win中看起来很好。如果您将rect转换为路径,它会很好地工作。

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

Michael Mullany 4 年前

@MichaelMullany 给出了一个变通方法。( https://stackoverflow.com/a/70054910/1065654 ). 或者,您可以使用 stroke-linecap="square" 延伸线条并覆盖缺口

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

在Linux上使用Google Chrome 95.0.4638.69版进行测试。

推荐文章