Svg 1px宽度的背景线

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

<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"); }

并强调.vg

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

它工作正常，但当我试图在谷歌浏览器中缩放页面时，我得到的是这样的东西。请注意，第二段看起来很好。但是在多行paragarpah的顶部有一条奇怪的细线。而其他线条模糊。问题是，当我将这个html转换为pdf（通过wkhtmltopdf）并打印它时，我会得到奇怪的文物（有些线条变得太薄，在段落顶部也有一条细线）。如何获得精确的1px宽度线？谢谢！

已邀请:

2 个回复

募磷

如果您只需要1px线，只需使用PNG作为背景图像。例如，如果行之间需要20px的间距，则可以创建宽度为1像素，高度为21像素的PNG图像，然后使用所需的颜色（所需的下划线颜色）在此图像的最底部绘制1x1像素。 20像素透明。然后，如果需要，您可以使用background-position属性调整定位。由于svg是矢量，它将根据容器进行缩放，因此您无法将线的宽度/高度精确地设置为1像素。例如，我不得不使用stroke-width: 3，我的容器厚度接近1像素。

翱抹村

我认为@thenoviceoof是对的。在CSS中实现这一目标的最简单有效的方法是将text-decoration:underline;应用于p标记的类。请参阅此处的工作示例：http：//jsfiddle.net/3UBUG/

要回复问题请先登录或注册

Svg 1px宽度的背景线

2 个回复

发起人

underline

问题状态

Svg 1px宽度的背景线

与内容相关的链接

2 个回复

发起人

underline

问题状态