테두리, 채우기

fill: red opacity: 0.5 fill-rule:nonzero stroke: red stroke-width:3px stroke-linecap:round stroke-linejoin:round stroke-dasharray: 5 5 D_Properties >> fill-stroke-style.svg
선, 색 특성
특성명 내용
fill 배경색 칠하기
opacity 투명도
fill-rule 테두리선이 교차될 때, 칠하기 규칙
stroke 테두리 색
stroke-width 테두리 두께
stroke-linecap 열린도형에서 끝선 규칙
stroke-linejoine 꺾이는 부분의 이음처리
stroke-dasharray 점선 규칙

글자 스타일

선, 색 예제 기본 문자열 나눔 브러쉬 폰트 글자 크기: 16 -> 7 굵은 글씨 이텔릭체 기본 문자열 간격 문자 간격 변경(0→4) 단어 간격 변경(0→20) capitalize → capitalize 첫 글자를 대문자로 변경 기본 위치 중앙 정렬 끝점 정렬 밑줄 테스트 취소선 테스트 윗줄 테스트 가origin 가middle 가central 가hanging 가ideographic 가mathematical 가after-edge 가before-edge 테두리(stroke) 설정 칠하기(fill) 설정 투명도 0.5
D_Properties >> font-style.svg
폰트 특성 적용 결과 설명
특성명 설명 비고
font-family 글씨체 <style bx:fonts="폰트명(별명)"> @import url(폰트 주소); </style>
글자 크기 font-size
글짜 두께 font-weight 100: Thin (Hairline)
200: Extra Light (Ultra Light)
300: Light
400: Normal
500: Medium
600: Semi Bold (Demi Bold)
700: Bold
800: Extra Bold (Ultra Bold)
900: Black (Heavy)
글자 모양 font-style normal, italic, oblique, oblique #deg
글자 간격 letter-spacing
단어 간격 word-spacing
영단어 규칙 text-transform capitalize, uppercase, lowercase
정렬 기준 text-anchor (세로 정렬) start, mid, end
dominant-baseline (가로 정렬) origin, middle, central, hanging, text-after-edge, text-before-edge,ideographic, mathematics
밑줄 text-decoration lowercase, line-through, overline
테두리 칠하기 stroke
(내용) 칠하기 fill
투명도 fill-opacity

흐르는 글자

<text x="" y="" dx="" dy="">Hello World</text>
<tspan font-weight="[bold | light ...]" fill="[COLOR]">new text</tspan>
Hello World! This is bold and red 흐르는 글자 ABCD 
<svg width="320" height="130" xmlns="http://www.w3.org/2000/svg">
    <text x="10" y="10">Hello World!</text>
    <text x="10" y="30" style="font-size:25px;">
      This is
      <tspan font-weight="bold" fill="red">bold and red</tspan>
    </text>
    <path id="text_path" d="M 20,20 C 80,60 100,40 220,20" fill="transparent" stroke="#F00A"/>
    <text style="font-size:20px;" dx="20" dy="50">
      <textPath xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#text_path">
        움직이는 글자 ABCD
      </textPath>
    </text>
  </svg>

변형

이미 생성한 그림(객체)을 밀거나 회전 할 수 있습니다.

rotate함수는 (0,0)을 기준으로 회전합니다(도형의 중심X). [도형을 (0,0)으로 가져오기 → 회전하기 → 원래자리로 가져가기] 

      <rect x="0" y="0" width="10" height="10" transform="translate(10,10)" fill="orange"/>
<rect x="0" y="0" width="10" height="10" transform="rotate(30)" fill="orange" />
<rect x="0" y="0" width="10" height="10" transform="translate(30,20) rotate(-30)" fill="blue" />
<rect x="0" y="0" width="10" height="10" transform="matrix(1.5, 0, 0, 2.5, 30, 20)" fill="blue" />

코드의 결과는 다음과 같습니다.

적용내용
예제 이름 내용
translate예제 오랜지박스 (10, 10) 밀기, 파랑박스(30, 20) 밀기
rotate 예제 오랜지박스 (30, 20) 밀기 > 45도 회전 파랑박스 45도 회전 > (30, 20) 밀기
matrix: 이동과 회전 예제 오랜지박스 50% 축소 > (10, 10)이동 파랑박스 (1.5, 2.5)확대 및 (30, 20) 밀기
rotate 예제 오랜지박스 matrix(1, 1, 0, 1, 10, 10) 파랑박스 matrix(1, 0, 0.5, 1, 30, 20)
translate 예제 rotate 예제
matrix: 이동과 회전 matrix: 비틀기

메트릭스 변환식은 다음과 같다.

$$ transform(a, b, c, d, e, f) = \begin{bmatrix} a & c & e \\ b & d & f \\ 0 & 0 & 1 \end{bmatrix} $$
a : x 확대/축소
b : x 기울기
c : y 기울기
d : y 확대/축소
e : x 이동
f : y 이동
D_Properties >> transform.svg (c) 2024 @iseohyun.com All rights reserved. CC-BY-SA 이동, 변형 예제 10 x 10 translate(30,20) rotate(45) matrix:1, 1, 0, 1, 5, 15 
<rect x="0" y="0" width="10" height="10" fill="red" />
<rect x="0" y="0" width="10" height="10" transform="translate(30,20)" fill="blue" />
<rect x="0" y="0" width="10" height="10" transform="translate(30,20) rotate(45)" fill="orange" />
<rect x="0" y="0" width="10" height="10" transform="matrix(1, 1, 0, 1, 5, 15)" fill="green" />