SVG text 요소
<text>
<text> 요소는 텍스트로 구성된 SVG 그래픽 요소를 그릴 때 사용합니다. 다른 SVG 그래픽 요소처럼 gradient, pattern, clipping path, mask, filter를 <text> 에 적용할 수 있습니다.
<text> 요소 내에 있지 않은 텍스트가 SVG 안에 포함되어 있으면 렌더되지 않습니다.
기본 속성 값은 아래의 네 가지입니다.
x : 텍스트 baseline의 시작점의 x 좌표입니다. 기본값은 0입니다.
y : 텍스트 baseline의 시작점의 y 좌표입니다. 기본값은 0입니다.
dx : 이전 텍스트 요소에서 수평으로 텍스트의 위치를 이동합니다.
dy : 이전 텍스트 요소에서 수직으로 텍스트의 위치를 이동합니다.
[예시]
// index.html
<svg>
<text y="10%"><svg><text></text></svg></text>
</svg>
HTML
복사
// style.css
* {
margin: 0;
padding: 0;
font-size: 20px;
}
CSS
복사
좌측 상단에 svg text 요소를 보여줍니다.
이 위치를 기준으로 해서 dx, dy를 설정해서 다음과 같이 위치를 이동시킬 수 있습니다.
<svg width="400" height="140" viewBox="0 0 400 140">
<text y="10%" dx="30px" dy="30px" rotate="-24, 8, -8, -4, -20, -13, 6, 0, 20, 20, 20, 20">Rotated Text</text>
</svg>
HTML
복사
rotate
rotate : 각 개별 glyph(글리프)의 방향을 회전합니다. glyph는 개별적으로 회전할 수 있습니다. 기본값은 none입니다.
여기서 glyph는 문자나 기호를 시각적으로 표현한 것입니다. 예를 들어 문자 a는 많은 다른 glyph로 그릴 수 있습니다. 문자 a 의 시각적인 표현이 다양하기 때문입니다. Glyphs의 모음을 Fonts라고 합니다.
[예시]
<svg width="400" height="140" viewBox="0 0 400 140">
<text y="10%" dx="30px" dy="30px" rotate="-24, 8, -8, -4, -20, -13, 6, 0, 20, 20, 20, 20">Rotated Text</text>
</svg>
HTML
복사
글자수가 정확히 매칭되는 경우 위와 같습니다.
글자 수와 rotate로 설정한 개수가 일치하지 않으면, 다음과 같이 매칭되는 글자만 설정한 값으로 회전시키고 나머지는 마지막에 설정한 rotate 값에 따라 회전됩니다.
<svg width="400" height="140" viewBox="0 0 400 140">
<text y="10%" dx="30px" dy="30px" rotate="-24 20">Rotated Text</text>
</svg>
HTML
복사
첫번째 문자를 제외하고 모두 마지막 설정 값에 맞춰 오른쪽으로 누웠습니다.
textLength
textLength : 설정된 width에 맞춰 문자 사이의 공백을 조절합니다.
[예시]
<svg width="400" height="140" viewBox="0 0 400 140">
<text y="10%" dx="30px" dy="30px" textLength="200">Text</text>
</svg>
HTML
복사
lengthAdjust
lengthAdjust : textLength 로 설정한 width에 맞춰 텍스트를 늘리거나 압축합니다. 값 형식에는 spacing과 spacingAndGlyphs가 있고 기본값은 spacing입니다.(바로 위에서 textLength 를 조절했을 때 spacing으로 적용된 것을 확인했습니다.)
여기서 spacing은 공간을 채우기 위해 글자의 간격을 조절하는 것이고, spacingAndGlyphs는 공간을 채우기 위해 glyph의 크기를 조절하는 것입니다.
[예시]
<svg width="400" height="140" viewBox="0 0 400 140">
<text y="10%" dx="30px" dy="30px" lengthAdjust="spacingAndGlyphs" textLength="200">Text</text>
</svg>
HTML
복사
그 밖에도 svg text 요소는 텍스트 스타일을 지정하기 위해 font-family, font-size, kerning, letter-spacing, word-spacing, text-decoration, stroke, fill과 같은 텍스트 CSS 속성을 사용할 수 있습니다.
SVG text 요소는 다른 그래픽 요소처럼 모양, 선, 화살표에 추가할 수 있는 stroke이나 fill을 적용할 수 있습니다. 그리고 XML character data로 표현될 수 있는 실제 텍스트이므로 접근성이 보장된다는 장점이 있습니다.
참고
SVG mask와 clip-path
SVG를 사용할 때 그 모양이나 이미지의 일부분을 숨기는 방법을 알아보려고 합니다.
mask와 clip-path를 배우기 전에 clipping과 masking을 알아봅시다.
clipping
clipping path는 정의된 도형 내의 모든 것을 볼 수 있는 반면 외부 부분은 "clipping"되어 캔버스에 나타나지 않게 하는 것입니다.
masking
마스크를 통해 배경에 칠해질 그래픽 객체나 모양의 일부분을 완전히 또는 부분적으로 가리는 것입니다.
어떤 물체의 모양에 의해서 정해진 가시 영역으로 객체를 받아들이는 것입니다.
차이점
이 두 가지 유형의 옵션 사이에는 매우 미묘한 차이가 있습니다.
clipping path는 클립된 객체가 제거되어 반투명 효과가 가능하지 않은 "hard mask"와 같습니다.
mask는 각 픽셀이 다양한 정도의 투명도와 불투명도를 갖는 모양 또는 이미지로 구성되어 있어 투명도 등을 조절하는 것이 허용됩니다.
<mask>
mask를 사용하면 외부에 있는 건 다 잘라내는 가시 영역을 정의할 수 있습니다. 또는 가시 영역 내에서 잘라내고 싶은 영역을 정의할 수 있습니다.
기본 속성은 아래와 같습니다.
height: 이 속성은 마스킹 영역의 높이를 정의합니다. 기본값: 120%입니다.
maskContentUnits: 이 속성은 <마스크>의 내용에 대한 좌표계를 정의합니다. 값 유형은 userSpaceOnUse | objectBoundingBox; 기본값: userSpaceOnUse입니다.(예시)
maskUnits: 이 속성은 <마스크>의 특성 x, y, 너비 및 높이에 대한 좌표계를 정의합니다. 값 유형은userSpaceOnUse | objectBoundingBox; 기본값: objectBoundingBox입니다.(예시)
x: 이 속성은 마스킹 영역의 왼쪽 상단 모서리의 x축 좌표를 정의합니다. 기본값은 -10%입니다.
y: 이 속성은 마스킹 영역의 왼쪽 상단 모서리의 y축 좌표를 정의합니다. 기본값은 -10%입니다.
width: 이 속성은 마스킹 영역의 너비를 정의합니다. 기본값은 120%입니다.
[예시]
<svg viewBox="0 0 250 250">
<mask id="myMask">
<rect x="0" y="0" width="100" height="100" fill="white" />
<circle cx="50" cy="50" r="45" fill="black" />
</mask>
<image xlink:href="https://via.placeholder.com/400x400" width="100" height="100" />
<rect x="0" y="0" width="100" height="100" fill="coral" mask="url(#myMask)" />
</svg>
HTML
복사
mask 요소의 rect, circle은 각각 fill=”white”와 fill=”black”을 지정했습니다. black 영역만큼 보여주고 white 영역만큼 가려줍니다.
앞서 말했던 반투명한 마스킹 효과를 아래와 같이 구현하겠습니다.
<svg viewBox="0 0 250 250">
<radialGradient id="rg">
<stop offset="0" stop-color="black" />
<stop offset="1" stop-color="white" />
</radialGradient>
<mask id="mask">
<rect x="0" y="0" width="50" height="50" fill="white" />
<circle cx="50" cy="50" r="45" fill="url(#rg)" />
</mask>
<image xlink:href="https://via.placeholder.com/400x400" x="25" y="25" width="50" height="50" />
<rect x="0" y="0" width="100" height="100" fill="coral" mask="url(#mask)" />
</svg>
HTML
복사
radialGradient 요소를 만들어 mask의 circle에 사용했습니다. rect와 circle이 일부 겹쳤는데 아래 선언한 circle이 그 자리를 차지해 마스킹합니다.
<clipPath>
clipPath는 어떤 직사각형이 있고 그 안에 원만 표시하는 등의 경우에 사용됩니다. 클립 경로 모양과 겹치지 않는 부분은 잘리고 손실되어 다시 표시되지 않습니다.
기본 속성은 clipPathUnits으로 clipPath 요소의 내용에 대한 좌표계를 정의합니다. 값 유형은 userSpaceOnUse | objectBoundingBox; 기본값은 userSpaceOnUse입니다.
clipPath에 의해 잘린 영역은 pointer-events가 전달되지 않으므로 클릭 이벤트를 캡쳐할 수 없다는 점을 주의해야 합니다.
[예시]
<svg viewBox="0 0 250 250">
<clipPath id="clip-path">
<circle cx="50" cy="50" r="45" />
</clipPath>
<image xlink:href="https://via.placeholder.com/400x400" width="100" height="100" />
<rect x="0" y="0" width="100" height="100" fill="coral" clip-path="url(#clip-path)" />
</svg>
HTML
복사
rect 요소에서 clipPath에 지정한 circle만큼만 잘라서 표시되었습니다.
