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寬度線

回答

相關問題