0

我想绘制一个带有顶部和底部边框的矩形（作为数据库流程图的一部分）。因此，我像这样在 rect 上使用 stroke-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>

如果您仔细观察渲染矩形的左上角，您应该会看到一个凹口（由洋红色圆圈突出显示）。该像素未在矩形的其他角上呈现（由绿色垂直线突出显示）：

渲染的 PNG

我预计

  • 没有缺口
  • 顶线与底线的长度相同
  • 顶线和底线在渲染图像中的相同 x 位置开始

这意味着，我希望图像看起来像这样（没有洋红色圆圈和绿线）

固定图像

如何修复我的 SVG 看起来像这样？这可以用strokeon完成rect吗？为什么首先添加缺口/像素？

编辑：我在 Google Chrome 版本 95.0.4638.69 和 Firefox 94.0 的 Linux 上遇到了这个问题，但这似乎是一个错误（见评论）。

4

2 回答 2

2

这似乎是一个 firefox 错误——在 Chrome/Win 中看起来不错。如果将矩形转换为路径，则可以正常工作。

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

于 2021-11-21T13:21:27.330 回答
1

@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 进行测试。

于 2021-11-21T18:17:00.637 回答