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과 같은 것입니다.

두 번째 단락이 올바르게 표시됩니다. 그러나 다중 선 파라가 파 위에 이상한 얇은 선이 있습니다. 그리고 다른 라인들은 불분명합니다.

문제는이 html을 pdf (wkhtmltopdf로)로 변환하고 인쇄 할 때 이상한 유물 (일부 선이 너무 얇아지고 단락 상단에가는 선이 있음)이 나타납니다.

정확하게 1px 너비 줄을 얻는 방법은 무엇입니까? 감사!

출처

2011-02-25 Denis

{text-decoration : underline;}에 어떤 문제가 있습니까? – thenoviceoof

Ooops, 나는 그 텍스트 장식이 나의 요구 사항을 충족시키지 않는다는 것을 잊어 버린다. 심지어 빈 단락에 밑줄을 써야한다. 예를 들어 "width : 500px, height : 60px, line-height : 20px;"라는 단락이 있습니다. 단락에 포함 된 텍스트의 양에 상관없이, 너비가 500px이고 세로 간격이 20px 인 행이 3 개 있어야합니다. – Denis

합니다. 예를 들어, 선 사이에 20 픽셀 간격이 필요한 경우 너비가 1 픽셀, 높이가 21 픽셀 인 PNG 이미지를 만든 다음이 이미지의 맨 아래에 1x1 픽셀을 필요한 색상 (원하는 밑줄 색상)으로 그립니다. 20 픽셀 투명.

그런 다음 필요할 경우 배경 위치 속성을 사용하여 위치를 조정할 수 있습니다.

svg가 벡터이므로 컨테이너에 따라 크기가 조정되므로 실제로 너비/높이를 정확히 1 픽셀로 설정할 수 없습니다. 예를 들어, 나는 stroke-width: 3을 사용해야 만했으며 컨테이너의 두께가 1 픽셀에 가까웠습니다.

출처

2017-11-06 10:44:44

@thenoviceoof이 맞다고 생각합니다. CSS에서 이것을 구현하는 가장 간단하고 효과적인 방법은 p 태그의 클래스에 text-decoration:underline;을 적용하는 것입니다.

여기서 일하는 예를 참조하십시오 : 당신은 단지 배경 이미지로 PNG를 사용, 정확히 1 픽셀의 라인이 필요한 경우 http://jsfiddle.net/3UBUG/

출처

2011-02-25 12:19:57 Dan

여러 줄 텍스트의 경우 사용자 정의 밑줄이 필요합니다. @thenoviceoof에 대한 내 의견을 참조하십시오. 빈 단락 공백에도 밑줄을 그어야합니다. – Denis

답변

관련 문제