개발자의 끄적끄적

[html/css] svg에서 text(글자) 가운데 정렬하기(수직, 수평 중앙정렬) [펌] svg에서 글자를 가운데로 정렬하는 방법을 검색해 봤는데 한국에서는 잘 안나오는거 같다. 아직 svg를 쓰는데 익숙하지는 않은것 같다. 그래서 대부분 svg예제에서보면 x,y로 위치를 줘서 배치를 하는 것을 볼 수 있다. 그런데 위치를 상대적으로 배치하는것 역시 중요하다. 그래서 수직 수평 중앙정렬을 한번 해보도록 하자. 위의 예제는 수직 중앙 정렬을 html의 svg의 text를 중앙 정렬한 예제이다. 이를 코드로 구현한 것은 아래와 같다. Lorem 위와 같은 코드를 사용하면 수직 수평 중앙 정렬을 구현할 수 있다. 왜 그런지 한번 알아보도록 하자. 일단 svg의 크기가 중요하다. 이 크기의 절반을 사용할 것..

[html/css] svg path text 사용법 Quick brown fox jumps over the lazy dog. 위 샘플 소스에서 처럼 텍스트를 띄우고 싶은 svg path 의 아이디값을 Quick brown fox jumps over the lazy dog. 파란색 블럭 친 textPath href 자리에 넣어주면 됩니다. 참고들하세요! 출처 : developer.mozilla.org/en-US/docs/Web/SVG/Element/textPath

[html/css] SVG 텍스트 [펌] 요소는 SVG 그래픽 내에 텍스트를 마크업 할 때 사용합니다. 많은 속성 옵션을 제공하며, 그레디언트, 패턴, 클리핑 패스, 마스크 또는 필터에도 적용 할 수 있습니다. SVG 그래픽은 일반 그래픽 이미지와 달리 SVG 코드 내에서 쉽게 변경하고 편집 할 수 있어 그래픽에 확장 가능한 텍스트를 포함하는 매우 강력한 기능을 제공합니다. SVG 텍스트 웹폰트 Leckerli One evening 드래그 복사가 가능한 SVG 텍스트 텍스트가 SVG 뷰포트에 잘려 보인다면? 뷰포트 크기를 조정하세요. 기본 속성 SVG 뷰포트에 요소를 배치하는 속성입니다. x, y 속성은 절대좌표입니다. 추가적으로 dx, dy 속성을 사용하면 설정된 좌표에 상대적으로 위치 이동시킬 수 있..