Svg背景的1px宽度线

我需要在段落中划线。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"); }

而且underline.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>

它工作正常，但是当我试图在谷歌浏览器缩放页面我得到像this。

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

问题是，当我将这个html转换为pdf（由wkhtmltopdf）并打印它时，我得到了奇怪的文物（某些行变得太薄，在段落顶部也有一条细线）。

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

来源

2011-02-25 Denis

{text-decoration：underline;}有什么问题？ – thenoviceoof 2011-02-25 05:48:29

我忘了注意，文字装饰不符合我的要求，即使是空白段落也必须加下划线。例如，有一段“宽度：500px;高度：60px;行高：20px;”。无论文章中包含多少文字，都应该有3行，宽度为500px，垂直间距为20px。 – Denis 2011-02-27 04:36:18

如果您需要的1px的线，只需使用PNG作为背景图片。例如，如果需要线条间距为20px，则可以创建宽度为1像素，高度为21px的PNG图像，然后使用所需颜色（需要的下划线颜色）在该图像底部绘制1x1像素，然后将前一个20像素透明。

然后，您可以根据需要使用background-position属性调整定位。

由于svg是矢量，它将根据容器缩放，因此无法将线条的宽度/高度精确设置为1像素。例如，我不得不使用stroke-width: 3，它的容器厚度接近1像素。

来源

2017-11-06 10:44:44

我认为@thenoviceoof是正确的。在CSS中实现这个最简单有效的方法是将text-decoration:underline;应用于p标记的类。

看到这里的工作例如：http://jsfiddle.net/3UBUG/

来源

2011-02-25 12:19:57 Dan

我需要为多行文本定制下划线，请参阅我对@thenoviceoof的评论......空白段落空间也必须加下划线。 – Denis 2011-02-27 04:55:08

Svg背景的1px宽度线

回答

相关问题