css - Svg 1px 宽度的背景线

Question

我需要在段落中的每一行下划线。

<p class="underline">multi-line text multi-line text multi-line text</p><br/>
<p class="underline" style="background-repeat: no-repeat;">single-line text</p>

这是一个样式:

.underline { width: 100px; font-size: 12px; line-height: 16px; background: url("underline.svg"); }

和下划线.svg

<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="100%" height="16">
  <line x1="0" y1="15" x2="100%" y2="15" style="stroke:black;stroke-width:1" shape-rendering="crispEdges"/>
</svg>

它工作正常，但是当我尝试在 Google Chrome 中缩放页面时，我得到类似 this 的信息.

请注意，第二段看起来不错。但是在多线paragarpah之上有一条奇怪的细线。其他线条模糊不清。

问题是，当我将此 html 转换为 pdf(通过 wkhtmltopdf)并打印时，我得到了奇怪的人工制品(一些线条变得太细，段落顶部也有一条细线)。

如何获得精确的 1px 宽度的线？谢谢!

Answer 1

如果您需要恰好 1px 的线条，只需使用 PNG 作为背景图像即可。例如，如果您需要 20 像素的线条间距，您可以创建宽度为 1 像素、高度为 21 像素的 PNG 图像，然后在该图像的最底部绘制 1x1 像素并使用所需的颜色(您想要的下划线颜色)，留下前面的20 像素透明。

如果需要，您可以使用 background-position 属性调整定位。

由于 svg 是矢量并且它会根据容器进行缩放，所以您不能真正将线条的宽度/高度设置为正好 1 个像素。例如，我必须使用 stroke-width: 3 并且我的容器的厚度接近 1 像素。