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"); }
and 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>
它工作正常，但是当我尝试在 Google Chrome 中缩放页面时，我得到类似 这个。
请注意，第二段看起来不错。但多线paragarpah上面有一条奇怪的细线。而其他的线条都是模糊的。
问题是，当我将此 html 转换为 pdf（通过 wkhtmltopdf）并打印它时，我得到了奇怪的人工制品（有些线条变得太细，段落顶部也有一条细线）。
如何获得精确的 1px 宽度线？谢谢！
I need to underline each line in a paragraph.
<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>
Here is a style:
.underline { width: 100px; font-size: 12px; line-height: 16px; background: url("underline.svg"); }
And 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>
It works fine, but when I'm trying to zoom page in Google Chrome I'm getting something like this.
Note that a second paragraph looks fine. But there is a strange thin line on top of multi-line paragarpah. And other lines are fuzzy.
The problem is that when I'm converting this html to pdf (by wkhtmltopdf) and printing it, I'm getting strange artefacts (some lines becomes too thin, there is also a thin line at a paragraph top).
How to get exact 1px-width line? Thanks!
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
如果您需要正好 1px 的线条，只需使用 PNG 作为背景图片。例如，如果行之间需要 20 像素间距，则可以创建宽度为 1 像素、高度为 21 像素的 PNG 图像，然后使用所需的颜色（所需的下划线颜色）在此图像的最底部绘制 1x1 像素，保留前面的内容20 像素透明。
然后，如果需要，您可以使用 background-position 属性调整位置。
由于 svg 是矢量，并且它将根据容器进行缩放，因此您无法真正将线条的宽度/高度设置为恰好 1 个像素。例如，我必须使用
lines-width: 3并且它的容器厚度接近 1 像素。If you need exactly 1px line, just use PNG as background image. For example, if you need 20px spacing between lines, you would create PNG image 1 pixel in width and 21px in height, and then draw 1x1 pixel on the very bottom of this image with the needed color (underline color you want), leaving preceding 20 pixels transparent.
Then you might adjust the positioning with background-position property if needed.
Since svg is vector and it will be scaling depending on the container, you can't really set width/height of the line to exactly 1 pixel. For example, i had to use
stroke-width: 3and it was close to 1 pixel in thickness for my container.我认为@thenoviceoof是对的。在 CSS 中实现此目的最简单有效的方法是将
text-decoration:underline;应用于p标记的类。请参阅此处的工作示例：http://jsfiddle.net/3UBUG/
I think @thenoviceoof is right. The most simple and effective method to achieve this in CSS would be to apply a
text-decoration:underline;to the class of yourptag.See working example here: http://jsfiddle.net/3UBUG/