음 아마 비둘기보단 똑똑할꺼야
준돌 Jundol / 2015.10.05 16:21 / HTML5/SVG



document.createElementNS

네임스페이스를 사용하여 새 Element 노드를 생성한다. SVG는 XHTML 언어이므로 동적으로 생성할때는 createElement 를 사용하면 안되고 createElementNS 를 사용해야 한다.

createElement 를 사용해서 동적 삽입할 경우 개발자도구의 태그에는 추가된것으로 보이지만, 실제로 화면에 그려지진 않는다.


element = document.createElementNS(namespaceURI, qualifiedName);

parameter

namespaceURI : 새 element 에 대한 네임스페이스를 가리키는 유일한 식별자다. 네임스페이스가 없다면 null이 할당된다.

qualifiedName: 새 element에 대한 완결된 이름. 


return 값

element : 지정된 name 과 namespace를 갖는 새로 생성된 Element 노드.


사용 예

 - 동적생성으로 SVG 를 삽입하고싶을때 사용할 수 있는 함수를 만들어보자

 - 동적으로 SVG 태그를 만들고 rect 를 svg에 붙이는 소스코드.

  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
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
(function(){
	NS = {
		HTML: 'http://www.w3.org/1999/xhtml',
        MATH: 'http://www.w3.org/1998/Math/MathML',
        SE: 'http://svg-edit.googlecode.com',
        SVG: 'http://www.w3.org/2000/svg',
        XLINK: 'http://www.w3.org/1999/xlink',
        XML: 'http://www.w3.org/XML/1998/namespace',
        XMLNS: 'http://www.w3.org/2000/xmlns/' // see http://www.w3.org/TR/REC-xml-names/#xmlReserved
	};

	SVG = document.createElementNS(NS.SVG, "svg");

	browser = {
		isOpera : function(){
			return !!window.opera;
		},
		supportsSelectors: function(){
			return !!SVG.querySelector;
		},
		supportsXpath: function(){
			return !!document.evaluate;
		}
	};

	if(browser.supportsSelectors()){
		getElem = function(id){
			return SVG.querySelector("#" + id);
		};
	} else if (browser.supportsXpath()){
		getElem = function (id) {
            // xpath lookup
            return domdoc_.evaluate(
                'svg:svg[@id="svgroot"]//svg:*[@id="' + id + '"]',
                domcontainer_,
                function () { return WPod.svgedit.NS.SVG; },
                9,
                null).singleNodeValue;
        };
	} else {
		getElem = function(id){
			return $(SVG).find('[id=' + id + ']')[0];
		};
	};

	assignAttributes = function(node, attrs, suspendLength){
		if(!suspendLength){
			suspendLength = 0;
		}

		var handle = null;

		if(!browser.isOpera()){
			SVG.suspendRedraw(suspendLength);
		}

		var i;
		for(i in attrs){
			var ns = (i.substr(0,4) === 'xml:' ? NS.XML :
				i.substr(0,6) === 'xlink:' ? NS.XLINK : null);

			if(ns){
				node.setAttributeNS(ns, i, attrs[i]);
			} else {
				node.setAttribute(i, attrs[i]);
			}
		}

		if(browser.isOpera()) {
			SVG.unsuspendRedraw(handle);
		}
	}

	addSvgElementFromJson = function(data){
		var shape = getElem(data.attr.id);

		if(shape && data.element != shape.tagName){
			shape = null;
		}

		if(!shape){
			shape = document.createElementNS(NS.SVG, data.element);
		}
		assignAttributes(shape, data.attr, 100);
		return shape;
	}

	var svg = addSvgElementFromJson({
		"element":"svg",
		"attr":{
			"width": 500,
			"height": 500,
			"border": "solid 1px #000000"
		}
	});

	document.body.appendChild(svg);

	// 사용법
	var rect = addSvgElementFromJson({
		"element": "rect",
		"attr": {
			"id": "svg_rect",
			"x": 10,
			"y": 10,
			"width": 100,
			"height": 100,
			"fill": "red",
			"stroke": "solid"
		}
	});

	svg.appendChild(rect);
})();




'HTML5 > SVG' 카테고리의 다른 글

[SVG] SVG matrix interface  (0) 2015.11.23
[SVG] preserveAspectRatio 고정종횡비  (0) 2015.10.19
[SVG] document.createElementNS  (0) 2015.10.05
SVG Editor 분석-3 Path 포인트 정의하기  (0) 2015.06.15
SVG pathsegType  (0) 2015.06.15
SVG Editor 분석-2 객체 추가  (0) 2015.06.12
준돌 Jundol / 2015.06.09 12:23 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.


SVG Gradients

그라디언트란 하나의 색상에서 또 다른 하나의 색상으로 자연스럽게 변화가 가능한 기능이다. 게다가 몇몇의 색상의 변화는 같은 요소에 적용이 가능하다.

SVG의 그라디언트 타입은 두 가지가 있다.

  • Linear
  • Radial

SVG Linear Gradient - <linearGradient>

<linearGradient> 태그는 linear gradient 를 정의할때 사용한다.
<linearGradient> 태그는 반드시 <defs>태그와 중첩되어야한다. <defs>태그는 그라디언트와같은 특별한 속성을 정의하거나 정의를 생략할때 사용한다.

Linear 그라디언트는 세로 혹은 가로로 적용이 가능 하다.
  • 가로 그라디언트는 y1 과 y2 가 동일하고 x1 과 x2가 다르다.
  • 세로 그라디언트는 x1과 x2 가 동일하고 y1 과 y2가 다르다.
  • 기울어진 그라디언트는 네 점 모두 다르다.

예제 1
원에 가로 linear 그라디언트를 적용한다. 색상은 노란색에서 빨간색으로 바뀐다.

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad1" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad1)" />
</svg>


코드 설명

  • <linearGradient> 태그 내의 x1 , x2 , y1 , y2 속성은 그라디언트의 시작점과 끝점을 정의한다.
  • 그라디언트의 색상 유효갯수는 두가지 이상이다. 각 색상은 <stop> 태그로 정의된다. offset속성은 그라디언트 색상의 시작과 끝을 정의한다.
  • <ellipse>태그 내의 fill 속성은 그라디언트의 id와 연결한다.

예제 2
원에 세로 linear 그라디언트를 적용한다. 색상은 노란색에서 빨간색으로 바뀐다.

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad2" x1="0%" y1="0%" x2="0%" y2="100%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad2)" />
</svg>


예제 3

예제 1번에 원형안에 텍스트를 추가해보자.

SVG

SVG 코드

<svg height="150" width="400">
  <defs>
    <linearGradient id="grad3" x1="0%" y1="0%" x2="100%" y2="0%">
      <stop offset="0%" style="stop-color:rgb(255,255,0);stop-opacity:1" />
      <stop offset="100%" style="stop-color:rgb(255,0,0);stop-opacity:1" />
    </linearGradient>
  </defs>
  <ellipse cx="200" cy="70" rx="85" ry="55" fill="url(#grad3)" />
  <text fill="#ffffff" font-size="45" font-family="Verdana" x="150" y="86">
  SVG</text>
</svg>


코드 설명

  • <text>태그는 텍스트를 추가 할 수 있다.

출처 W3School.com - SVG - SVG Linear


'HTML5 > SVG' 카테고리의 다른 글

SVG Editor 분석-1 [DOM 구조파악]  (0) 2015.06.10
SVG Radial  (0) 2015.06.09
SVG Linear Gradients  (0) 2015.06.09
SVG Drop Shadows  (0) 2015.06.09
SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
준돌 Jundol / 2015.06.09 11:49 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.


SVG <feOffset>

예제 1

<feOffset>태그는 그림자 효과를 내기 위해 사용한다. 이 태그는 SVG 그래픽에서 착안하였다. 그리고 xy 면을 조금 이동하였다.

offset의 첫번째 예제는 직사각형과 offset태그이다. 그 후 <feBlend>태그를 사용하여 진짜 offset이미지의 제일 위에 그려낸다.

SVG 코드

<svg height="120" width="120">
  <defs>
    <filter id="f1" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feBlend in="SourceGraphic" in2="offOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill=
"yellow" filter="url(#f1)" />
</svg>

코드 설명
  • <filter>태그 내의 id 속성은 filter의 유니크한 이름을 나타낸다.
  • <rect>태그 내의 filter속성은 속성값의 이름을 filter id 이름과 매핑한다.

예제 2
이제, offset 이미지를 <feGaussianBlur>태그를 이용하여 흐리게 만들 수 있다. 

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f2" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill=
"yellow" filter="url(#f2)" />
</svg>


코드 설명

  • <feGaussianBlur> 내의 stdDeviation 속성은 blur 의 양을 나타낸다.

예제 3
이제, 그림자로 표현된 부분을 검정색으로 바꾼다.

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f3" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceAlpha" dx="20" dy="20" />
      <feGaussianBlur result="blurOut" in="offOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill=
"yellow" filter="url(#f3)" />
</svg>


코드 설명

  • <feOffset> 태그 내의 in 속성을 SourceAlpha 로 바꾼다. SourceAlpha 속성값은 모든 RGBA 픽셀들을 Alpha 채널의 blur로 대체한다.

예제 4
이제, 그림자에 색상을 입한다.

SVG 코드

<svg height="140" width="140">
  <defs>
    <filter id="f4" x="0" y="0" width="200%" height="200%">
      <feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
      <feColorMatrix result="matrixOut" in="offOut" type="matrix"
      values=
"0.2 0 0 0 0 0 0.2 0 0 0 0 0 0.2 0 0 0 0 0 1 0" />
      <feGaussianBlur result="blurOut" in="matrixOut" stdDeviation="10" />
      <feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill=
"yellow" filter="url(#f4)" />
</svg>


코드 설명

  • <feColorMatrix> 태그는 offset이미지의 색상을 검정에 가깝게 바꾸는 역할을 한다. 값의 행렬안의 세 개의 '0.2' 수치는 각각 빨강, 초록, 파랑 채널을 적용시킨다. 그 채널들의 값을 감소시킬수록 색상은 검정색에 가까워진다. (검정색은 0 이다.)

출처 W3Shool.com - SVG - svg_feoffset


'HTML5 > SVG' 카테고리의 다른 글

SVG Radial  (0) 2015.06.09
SVG Linear Gradients  (0) 2015.06.09
SVG Drop Shadows  (0) 2015.06.09
SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
준돌 Jundol / 2015.06.09 11:23 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.


<defs> , <filter>

모든 인터넷상 SVG필터들은 <defs>요소 안쪽에 정의하고있다. <defs>요소는 정의를 생략하기 위하거나 필터같은 특별한 요소의 정의를 포함하기도한다. 

<filter>요소는 SVG 필터를 정의하기위해 사용한다. <filter>요소는 각 필터들을 구분하기 위해서 id속성을 필요로 한다. 


SVG <feGaussianBlur>

예제 1

<feGaussianBlur>요소는 blur 효과를 나타내기 위해 사용한다.

SVG 코드

<svg height="110" width="110">
  <defs>
    <filter id="f1" x="0" y="0">
      <feGaussianBlur in="SourceGraphic" stdDeviation="15" />
    </filter>
  </defs>
  <rect width="90" height="90" stroke="green" stroke-width="3"
  fill=
"yellow" filter="url(#f1)" />
</svg>


코드 설명

  • <filter>태그 내의 id 속성은 필터의 유니크한 이름을 부여하는데 사용한다.
  • blur효과를 내기 위해 <feGaussianBlur> 태그를 사용했다.
  • in="SourceGraphic" 부분은 전체 요소에 효과를 만들기 위해 사용한다.
  • stdDeviation 속성은 blur의 양을 결정하는데 사용한다.
  • <rect>태그 내에 있는 filter 속성은 filter요소의 f1아이디를 가진 필터와 연결된다.

출처 W3School.com - SVG - svg <feGaussianBlur>


'HTML5 > SVG' 카테고리의 다른 글

SVG Linear Gradients  (0) 2015.06.09
SVG Drop Shadows  (0) 2015.06.09
SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
준돌 Jundol / 2015.06.09 11:11 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.


SVG Filters - Intro

지원되는 브라우저

  • 크롬 8.0 이상
  • IE 10.0 이상
  • FF 3.0 이상
  • 사파리 6.0 이상
  • 오페라 9.6 이상

SVG 필터 요소

다음 장에서부터는 터치(설정할수있는)가 가능한 필터들만 보여줄 것이다. 그리고 SVG를 이용해서 어떤것들을 할 수 있는지 아이디어를 줄 것이다.

SVG에서 사용가능한 필터 목록 : 

  • <feBlend> - 이미지결합 필터
  • <feColorMatrix> - 색상변화를위한 필터
  • <feComponentTransfer>
  • <feComposite>
  • <feconvolveMatrix>
  • <feDiffuseLighting>
  • <feDisplacementMap>
  • <feFlood>
  • <feGaussianBlur>
  • <feImage>
  • <feMerge>
  • <feMorphology>
  • <feOffset> -  그림자 효과를 위한 필터
  • <feSpecularLighting>
  • <feTile>
  • <feTurbulence>
  • <feDistantLight> - 빛을 위한 필터
  • <fePointLight> - 빛을 위한 필터
  • <feSpotLight> - 빛을 위한 필터

Tip : 각각의 SVG요소에 여러개의 필터를 중복해서 사용이 가능하다.


출처 W3School.com - SVG - Filters

http://www.w3schools.com/svg/svg_filters_intro.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Drop Shadows  (0) 2015.06.09
SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
준돌 Jundol / 2015.06.08 18:00 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Stroke Properties

SVG는 다양한 범위의 선긋기 속성을 제공한다. 

  • stroke
  • stroke-width
  • stroke-linecap
  • stroke-dasharray
모든 선긋기 속성은 어떤 종류의 선이든 텍스트 그리고 원같은 요소의 테두리에 적용이 가능하다.

SVG stroke Property
stroke 속성은 색상을 결정한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none">
    <path stroke="red" d="M5 20 l215 0" />
    <path stroke="blue" d="M5 40 l215 0" />
    <path stroke="black" d="M5 60 l215 0" />
  </g>
</svg>


SVG stroke-width Property

stroke-width 속성은 선의 두께를 결정한다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="6">
    <path stroke-linecap="butt" d="M5 20 l215 0" />
    <path stroke-linecap="round" d="M5 40 l215 0" />
    <path stroke-linecap="square" d="M5 60 l215 0" />
  </g>
<>


SVG stroke-dasharray Property
stroke-dasharray 속성은 점선을 표현할 때 사용한다.
Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="80" width="300">
  <g fill="none" stroke="black" stroke-width="4">
    <path stroke-dasharray="5,5" d="M5 20 l215 0" />
    <path stroke-dasharray="10,10" d="M5 40 l215 0" />
    <path stroke-dasharray="20,10,5,5,5,10" d="M5 60 l215 0" />
  </g>
</svg>


출처 W3School.com - SVG - Stroking

http://www.w3schools.com/svg/svg_stroking.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Blur Effects  (0) 2015.06.09
SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
준돌 Jundol / 2015.06.08 17:49 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.

SVG Text - <text>

<text> 태그는 text를 정의할때 사용한다.


예제 1

text를 쓴다:

I love SVG! Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="30" width="200">
  <text x="0" y="15" fill="red">I love SVG!</text>
</svg>


예제 2

텍스트 회전

I love SVG Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="60" width="200">
  <text x="0" y="15" fill="red" transform="rotate(30 20,40)">I love SVG</text>
</svg>


예제 3

텍스트 태그는 <tspan>태그를 이용하여 각각의 text들을 정렬 할 수 있다. 각각의 <tspan>태그들은 다른 포맷과 위치를 가지고 있다.

Several lines: First line. Second line. Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="90" width="200">
  <text x="10" y="20" style="fill:red;">Several lines:
    <tspan x="10" y="45">First line.</tspan>
    <tspan x="10" y="70">Second line.</tspan>
  </text>
</svg>


예제 4

텍스트에 하이퍼링크 걸기 <a>태그와 결합

I love SVG! Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="30" width="200" xmlns:xlink="http://www.w3.org/1999/xlink">
  <a xlink:href="http://www.w3schools.com/svg/" target="_blank">
    <text x="0" y="15" fill="red">I love SVG!</text>
  </a>
</svg>


출처 W3School.com - SVG - Text

http://www.w3schools.com/svg/svg_text.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Filters  (0) 2015.06.09
SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
SVG Polygon  (0) 2015.06.08
준돌 Jundol / 2015.06.08 17:38 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.


SVG Path - <path>

<path> 태그는 path를 정의할때 사용한다.

밑의 명령어들은 path 정보들을 구하는데 사용된다.

  • M = moveto 기준점이동
  • L = lineto 선으로이동
  • H = horizontal lineto 가로선이동
  • v = vertical lineto 세로선이동
  • C = curveto 곡선이동
  • S = smooth curveto 부드러운 곡선이동
  • Q = quadratic Bezier curve 2차 베지어 곡선
  • T = smooth quadratic Bezier curveto 부드러운 2차 베지어 곡선
  • A = elliptical Arc 타원형의 호
  • Z = closepath 패스닫기

Note : 모든 명령어들은 소문자와 함께 표현될 수 있다. 대문자의 의미는 절대적인 위치이며, 소문자의 의미는 상대적인 위치의 의미이다.

예제 1

이미지의 시작점이 150,0 으로 이동해서 75,200 까지 선을 그린 후 225,200 까지 선을 그리고 마지막으로 150,0 까지의 경로를 닫은 이미지이다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="210" width="400">
  <path d="M150 0 L75 200 L225 200 Z" />
</svg>


예제 2

베지어 곡선은 부드러운 곡선을 그리는데 사용된다. 보통 사용자들은 두개의 종료지점을 고르고 하나 또는 두개의 설정 포인트를 잡는다. 베지어 곡선은 하나의 설정 포인트를 2차 베지어 곡선에 사용하고 다른 종류의 두 설정 포인트를 정육면체라 부른다.(의역입니다... 해석능력이 후달리네요 ㅠㅠ) 

아래의 예제는 2차 베지어곡석을 이용했다. A와 C는 각각 시작점과 종료지점이며 B는 설정 포인트이다.

A B C Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="400" width="450">
  <path id="lineAB" d="M 100 350 l 150 -300" stroke="red"
  stroke-width=
"3" fill="none" />
  <path id="lineBC" d="M 250 50 l 150 300" stroke="red"
  stroke-width=
"3" fill="none" />
  <path d="M 175 200 l 150 0" stroke="green" stroke-width="3"
  fill=
"none" />
  <path d="M 100 350 q 150 -300 300 0" stroke="blue"
  stroke-width=
"5" fill="none" />
  <!-- Mark relevant points -->
  <g stroke="black" stroke-width="3" fill="black">
    <circle id="pointA" cx="100" cy="350" r="3" />
    <circle id="pointB" cx="250" cy="50" r="3" />
    <circle id="pointC" cx="400" cy="350" r="3" />
  </g>
  <!-- Label the points -->
  <g font-size="30" font="sans-serif" fill="black" stroke="none"
  text-anchor=
"middle">
    <text x="100" y="350" dx="-30">A</text>
    <text x="250" y="50" dy="-10">B</text>
    <text x="400" y="350" dx="30">C</text>
  </g>
</svg>


복잡한가? 당연하다!!!! 왜냐하면 SVG 에디터를 이용하여 복잡한 그래픽을 패스를 사용하여 그려내려면 높은 권한(실력인듯) 이 복잡성에 관여해있기 때문이다. [의역. 그냥 어렵다는 뜻]


출처 W3School.com - SVG - svg_path

http://www.w3schools.com/svg/svg_path.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Stroking  (0) 2015.06.08
SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
SVG Polygon  (0) 2015.06.08
SVG Line  (0) 2015.06.08
준돌 Jundol / 2015.06.08 17:11 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.



SVG Polyline - <polyline>


예제 1

<polyline> 태그는 어떤 모양에서든지 스트레이트 선의 요소로 되어 있다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="200" width="500">
  <polyline points="20,20 40,25 60,40 80,120 120,140 200,180"
  style=
"fill:none;stroke:black;stroke-width:3" />
</svg>


예제 2

직선으로 이루어진 다른 예

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="180" width="500">
  <polyline points="0,40 40,40 40,80 80,80 80,120 120,120 120,160"
  style=
"fill:white;stroke:red;stroke-width:4" />
</svg>


출처 W3School.com - SVG - Polyline

http://www.w3schools.com/svg/svg_polyline.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Text  (0) 2015.06.08
SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
SVG Polygon  (0) 2015.06.08
SVG Line  (0) 2015.06.08
SVG Ellipse  (0) 2015.06.08
준돌 Jundol / 2015.06.08 15:22 / HTML5/SVG

* 본 글은 W3SCHOOL.COM 의 SVG 편을 해석 공부한 포스팅입니다.

* 필자의 기준이 절대적인 진리는 아닙니다.



SVG Polygon - <polygon>

<polygon> 태그는 최소 3개의 면을 가진 그래픽요소를 만들때 사용한다.

Polygon들은 곧은 선들로 이루어져있다. 그리고 모양은 "닫혀있다"

Polygon 은 그리스어로부터 왔다. "Poly" 의 의미는 "많은" 그리고 "gon" 은 "각".


예제 1

아래 예제는 3개의 면을 가진 polygon 이다.


Sorry, your browser does not support inline SVG.


SVG 코드

<svg height="210" width="500">
  <polygon points="200,10 250,190 160,210" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>

코드 설명

  • points 속성은 polygon 각 코너의 x,y 좌표를 나타낸다. (200,10) ==> 첫번째 x,y (250,190) ==> 두번째 x,y (160,210) ==> 세번째 x,y

예제 2
아래 예제는 4 개의 면을 가진 polygon 이다.

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="250" width="500">
  <polygon points="220,10 300,210 170,250 123,234" style="fill:lime;stroke:purple;stroke-width:1" />
</svg>



예제 3

<plygon> 태그를 가지고 별 만들기

Sorry, your browser does not support inline SVG.

SVG 코드

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style=
"fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" />
</svg>



예제 4
fill-rule 요소의 "evenodd" 속성을 이용해 바꾸기
Sorry, your browser does not support inline SVG.


SVG 코드

<svg height="210" width="500">
  <polygon points="100,10 40,198 190,78 10,78 160,198"
  style=
"fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" />
</svg>


출처 W3SCHOOL.COM - SVG - Polygon

http://www.w3schools.com/svg/svg_polygon.asp

'HTML5 > SVG' 카테고리의 다른 글

SVG Path  (0) 2015.06.08
SVG Polyline  (0) 2015.06.08
SVG Polygon  (0) 2015.06.08
SVG Line  (0) 2015.06.08
SVG Ellipse  (0) 2015.06.08
SVG Circle  (0) 2015.06.08
© 2015 Jundol in 음 아마 비둘기보단 똑똑할꺼야
Designed by DH / Powered by Tistory
73 / 12 / 113,811