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

И 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, я получаю что-то вроде this .

Обратите внимание, что второй абзац выглядит хорошо.Но есть странная тонкая линия поверх многострочного парагарфа.И другие строки нечеткие.

Проблема в том, что когда я конвертирую этот html в pdf (от wkhtmltopdf) и печатаю его, я получаю странные артефакты (некоторые строки становятся слишком тонкими, естьтонкая линия в начале абзаца).

Как получить точную линию шириной 1px?Спасибо!

Answer 1

Если вам нужна ровно 1 пиксельная линия, просто используйте PNG в качестве фонового изображения. Например, если вам нужно расстояние между строками 20 пикселей, вы должны создать изображение PNG шириной 1 пиксель и высотой 21 пиксель, а затем нарисовать пиксель 1x1 в самом низу этого изображения нужным цветом (нужным цветом подчеркивания), оставив перед собой предыдущий 20 пикселей прозрачный.

Тогда вы можете отрегулировать позиционирование с помощью свойства background-position, если необходимо.

Поскольку svg - это вектор, и он будет масштабироваться в зависимости от контейнера, вы не можете установить ширину / высоту линии ровно в 1 пиксель. Например, мне пришлось использовать stroke-width: 3, и он был близок к толщине 1 пиксель для моего контейнера.

Answer 2

Я думаю, @ thenoviceoof правильно.Самый простой и эффективный способ добиться этого в CSS - применить text-decoration:underline; к классу вашего p тега.

См. Рабочий пример здесь: http://jsfiddle.net/3UBUG/