svg 의 path 따라서 텍스트 나타내기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- path 를 미리 정의합니다. -->
        <defs>
            <path id="path" d="M50,100 C100,0 150,200 200,100" />
        </defs>
 
        <!-- textPath : 텍스트가 그려질 path 를 지정합니다. -->    
        <text font-size="15px" font-weight="bold" style="fill:green;">
            <textPath xlink:href="#path">선따라 텍스트를 그립니다...</textPath>
        </text>
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

안드로이드 Intent로 SMS, MMS, Mail 보내기  (1) 2017.07.27
HTML5/CSS3 svg 의 텍스트에 링크걸기  (0) 2017.07.26
HTML5/CSS3 svg의 defs 요소 : 참조를 위한 컨테이너  (0) 2017.07.24
HTML5/CSS3 svg 로 글자쓰기  (0) 2017.07.22
HTML5/CSS3 svg 로 path 요소로 선긋기  (0) 2017.07.21

svg의 defs 요소 : 참조를 위한 컨테이너



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- defs : 내용을 미리 정의해 놓는다 -->
        <defs>
            <rect id="test" x="50" y="50" rx="10" ry="10" width="100" height="100" /> 
        </defs>
        
        <!-- 일치하는 id 값의 내용을 보여준다 -->
        <use xlink:href="#test" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 의 텍스트에 링크걸기  (0) 2017.07.26
HTML5/CSS3 svg 의 path 따라서 텍스트 나타내기  (0) 2017.07.25
HTML5/CSS3 svg 로 글자쓰기  (0) 2017.07.22
HTML5/CSS3 svg 로 path 요소로 선긋기  (0) 2017.07.21
HTML5/CSS3 svg 로 다각형 그리기  (0) 2017.07.20

svg 로 글자쓰기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        x : 텍스트가 쓰여질 x좌표
        y : 텍스트가 쓰여질 y좌표
        font-family : 폰트종료
        font-size : 폰트크기
        font-weight : 폰트스타일
        fill : 글자색
         -->
        <text x="50" y="50" font-family="sans-serif" font-size="30px" font-weight="bold"
              style="fill:green;opacity:0.5;">Hello World!</text>
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 의 path 따라서 텍스트 나타내기  (0) 2017.07.25
HTML5/CSS3 svg의 defs 요소 : 참조를 위한 컨테이너  (0) 2017.07.24
HTML5/CSS3 svg 로 path 요소로 선긋기  (0) 2017.07.21
HTML5/CSS3 svg 로 다각형 그리기  (0) 2017.07.20
HTML5/CSS3 svg 로 선그리기  (0) 2017.07.19

svg 로 path 요소로 선긋기



대문자는 절대좌표, 소문자는 상대좌표

M, m

시작점 지정

L, l 

직선 그리기 

Z, z

시작점까지 연결하기 

H, h 

수평선 긋기 

V, v

수직선 긋기

C, c 

곡선 긋기 

S, s

곡선 이어긋기 

Q, q 

2차원 베지어 곡선 긋기

T, t 

2차원 베지어 곡선 이어긋기 

A, a 

타원이나 호 그리기 



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 직선 그리기 -->
        <!-- Lx좌표,y좌표 -->
        <path d="M50,50 L200,50 200,100Z" 
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 수평선 긋기 -->
        <!-- Hx좌표 -->
        <path d="M50,150 H200"
              stroke="green" stroke-width="5" />
              
        <!-- 수직선 긋기 -->
        <!-- Vy좌표 -->
        <path d="M250,50 V150"
              stroke="green" stroke-width="5" />
 
        <!-- 곡선 긋기 -->
        <!-- C조절점1x,조절점1y 조절점2x,조절점2y 끝점x,끝점y -->
        <path d="M50,200 C100,250 150,150 200,200" 
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 곡선 이어긋기 -->
        <!-- S조절점x,조절점y 끝점x,끝점y -->
        <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 -->
        <path d="M50,250 C100,300 150,200 200,250 S250,200 300,250"
              stroke="green" stroke-width="5" fill="none" />
              
        <!-- 2차원 베지어 곡선 그리기 -->
        <!-- Q조절점x,조절점y 끝점x,끝점y -->
        <path d="M50,300 Q125,350 200,300" 
              stroke="green" stroke-width="5" fill="none" />
            
        <!-- 베지어 곡선 이어긋기 -->
        <!-- T끝점x,끝점y -->
          <!-- 시작지점은 이전 곡선의 마지막 조절점의 반태편 또는 곡선이 없을 경우 마지막 지점이다 -->
        <path d="M50,350 Q125,400 200,350 T300,350"
              stroke="green" stroke-width="5" fill="none" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg의 defs 요소 : 참조를 위한 컨테이너  (0) 2017.07.24
HTML5/CSS3 svg 로 글자쓰기  (0) 2017.07.22
HTML5/CSS3 svg 로 다각형 그리기  (0) 2017.07.20
HTML5/CSS3 svg 로 선그리기  (0) 2017.07.19
HTML5/CSS3 svg 로 타원 그리기  (0) 2017.07.18

svg 로 다각형 그리기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        polygon : 선의 끝부분이 연결된다
            points : 띄어쓰기로 점들을 지정한다
         -->    
        <polygon points="50,50 200,50 250,100 200,150 50,150" 
                 style="fill:orange; stroke:green; stroke-width:5;" />
        
        <!-- 
        polyline : 선의 끝부분이 연결되지 않는다         
            points : 띄어쓰기로 점들을 지정한다
         -->
        <polyline points="50,200 200,200 250,250 200,300 50,300" 
                 style="fill:orange; stroke:green; stroke-width:5;" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 글자쓰기  (0) 2017.07.22
HTML5/CSS3 svg 로 path 요소로 선긋기  (0) 2017.07.21
HTML5/CSS3 svg 로 선그리기  (0) 2017.07.19
HTML5/CSS3 svg 로 타원 그리기  (0) 2017.07.18
HTML5/CSS3 svg 로 원 그리기  (0) 2017.07.17

svg 로 선그리기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        x1 : 시작점 x좌표
        y1 : 시작점 y좌표
        x2 : 끝점 x좌표
        y2 : 끝점 y좌표
         -->
        <line x1="50" y1="100" x2="250" y2="100"
              style="stroke:green; stroke-width:5; stroke-opacity:0.5;" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 path 요소로 선긋기  (0) 2017.07.21
HTML5/CSS3 svg 로 다각형 그리기  (0) 2017.07.20
HTML5/CSS3 svg 로 타원 그리기  (0) 2017.07.18
HTML5/CSS3 svg 로 원 그리기  (0) 2017.07.17
HTML5/CSS3 svg 로 사각형 그리기  (0) 2017.07.16

svg 로 타원 그리기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0" ?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        cx : 중점 x좌표
        cy : 중점 y좌표
        rx : 가로 반지름 크기
        ry : 세로 반지름 크기
         -->
        <ellipse cx="100" cy="100" rx="75" ry="50"
                 style="fill:orange; stroke:green; stroke-width:3;" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 다각형 그리기  (0) 2017.07.20
HTML5/CSS3 svg 로 선그리기  (0) 2017.07.19
HTML5/CSS3 svg 로 원 그리기  (0) 2017.07.17
HTML5/CSS3 svg 로 사각형 그리기  (0) 2017.07.16
HTML5/CSS3 canvas 클리핑(오려내기)  (0) 2017.07.15

svg 로 원 그리기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        circle : 원
            cx : 중심점 x
            cy : 중심점 y
            r : 반지름
        -->
        <circle cx="150" cy="150" r="100" 
                style="fill:orange; stroke:#000; stroke-width:3;" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 선그리기  (0) 2017.07.19
HTML5/CSS3 svg 로 타원 그리기  (0) 2017.07.18
HTML5/CSS3 svg 로 사각형 그리기  (0) 2017.07.16
HTML5/CSS3 canvas 클리핑(오려내기)  (0) 2017.07.15
HTML5/CSS3 canvas 도형의 이동, 회전, 확대  (0) 2017.07.14

svg 로 사각형 그리기



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
</head>
 
<body>
    <?xml version="1.0"?>
    <svg xmlns="http://www.w3.org/2000/svg" width="300px" height="400px" version="1.1">
        <!-- 
        rect : 사각형
            x : 가로 길이
            y : 세로 길이
            rx, ry : 모서리 라운드
            fill : 배경색
            fill-opacity : 투명도
            stroke : 선색
            stroke-width : 선두께
            stroke-opacity : 선투명도
         --> 
        <rect x="10" y="10" rx="10" ry="10"
              width="100" height="100" 
              style="fill:#ff0000; fill-opacity:0.5; stroke:#000; stroke-width:3;" />
    </svg>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 타원 그리기  (0) 2017.07.18
HTML5/CSS3 svg 로 원 그리기  (0) 2017.07.17
HTML5/CSS3 canvas 클리핑(오려내기)  (0) 2017.07.15
HTML5/CSS3 canvas 도형의 이동, 회전, 확대  (0) 2017.07.14
HTML5/CSS3 canvas의 save, restore : 설정 저장,복구  (0) 2017.07.13

canvas 클리핑(오려내기)



html)

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" 
          content="width=device-width, height=device-height, 
                     minimum-scale=1.0, maximum-scale=1.0, initial-scale=1.0">
    <title>Insert title here</title>
    <script type="text/javascript">
    window.onload = function(){
        var canvas = document.getElementById("canvas");
        if(canvas.getContext){
            var draw = canvas.getContext("2d");
            
            draw.beginPath();
            draw.arc(150, 150, 100, 0, Math.PI*2, true);
            draw.lineWidth = 5;
            draw.stroke();
            //clip : 그린 도형 만큼 잘라내서 보여준다
            draw.clip();
            
            var img = new Image();
            img.src = "images/testimage.jpg";
            img.onload = function(){
                draw.drawImage(img, 50, 50, 250, 250);    
            }
        }
    }
    </script>
</head>
 
<body>
    <canvas id="canvas" width="300px" height="400px"></canvas>
</body>
</html>
cs



결과

저작자표시 (새창열림)

'IT > - 프로그래밍' 카테고리의 다른 글

HTML5/CSS3 svg 로 원 그리기  (0) 2017.07.17
HTML5/CSS3 svg 로 사각형 그리기  (0) 2017.07.16
HTML5/CSS3 canvas 도형의 이동, 회전, 확대  (0) 2017.07.14
HTML5/CSS3 canvas의 save, restore : 설정 저장,복구  (0) 2017.07.13
HTML5/CSS3 canvas 에 텍스트 그리기  (0) 2017.07.12

+ Recent posts

티스토리툴바