Life is experience
2016-12-12
참고 http://animateyourhtml5.appspot.com/pres/

참고 https://www.w3.org/TR/SVG11/paths.html

위 자료를 참고로 해당 문서에 있는 효과들을 하나씩 아래에 구현해 볼 예정이다.
해당 기능들은 모바일에서는 레이아웃이 깨지거나, 제대로 안보일 수 있고, IE에서는 제대로 동작하지 않는 것이 많을 것이다.



Line 
<svg viewBox="0 0 600 150">
	<line x1="10" y1="10" x2="145" y2="145" stroke="#000000" stroke-width="10" stroke-linecap="round"/>
	<line x1="145" y1="145" x2="300" y2="80" style="stroke:rgb(255,0,0);stroke-width:5;stroke-dasharray:50,10;" />
	<line x1="300" y1="80" x2="0" y2="80" style="stroke:blue;stroke-width:8;stroke-dasharray:10,10,30,10,50,10,170,10;" />
</svg>
  • stroke-linecap : 선의 끝 처리
  • stroke-linejoin : 선의 모서리 처리
출처 : https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Fills_and_Strokes

Rect 
<svg viewBox="0 0 600 150">
	<defs>
		<filter id="f1" x="0" y="0">
			<feGaussianBlur in="SourceGraphic" stdDeviation="10" />
		</filter>
	</defs>
	<rect x="5" y="5" width="140" height="140" stroke="#000000" stroke-width="4" fill="#AAAAFF" />
	<rect x="190" y="5" rx="20" ry="20" width="100" height="100" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
	<rect x="320" y="5" width="140" height="140" fill="#AAAAFF" filter="url(#f1)" />
</svg>


Circle, Ellipse 
<svg viewBox="0 0 600 150">
	<defs>
		<filter id="f2" x="-1" y="-1" width="300%" height="300%">
			<feOffset result="offOut" in="SourceGraphic" dx="20" dy="20" />
			<feBlend in="SourceGraphic" in2="offOut" mode="normal" />
		</filter>
	</defs>
	<defs>
		<filter id="f3" x="-1" y="-1" width="300%" height="400%">
			<feOffset result="offOut" in="SourceGraphic" dx="40" dy="20" />
			<feGaussianBlur result="blurOut" in="offOut" stdDeviation="2" />
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
		</filter>
	</defs>
	<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>	
	<circle cx="75" cy="75" r="60" stroke="#000000" stroke-width="4" fill="#AAFFAA"/>
	<ellipse cx="200" cy="55" rx="15" ry="50" fill="url(#grad1)"/>
	<ellipse cx="300" cy="55" rx="40" ry="15" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" filter="url(#f2)" />
	<ellipse cx="430" cy="55" rx="50" ry="15" style="fill:red;stroke:black;stroke-width:5;opacity:0.5" filter="url(#f3)" />
</svg>


polygon, polyline 
<svg viewBox="0 0 600 300">
	<defs>
		<filter id="f4" x="0" y="0" width="300%" height="200%">
			<feOffset result="offOut" in="SourceAlpha" dx="10" dy="40" />
			<feGaussianBlur result="blurOut" in="offOut" stdDeviation="3" />
			<feBlend in="SourceGraphic" in2="blurOut" mode="normal" />
		</filter>
	</defs>
	<polygon points="100,10 40,198 190,78 10,78 160,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:evenodd;" filter="url(#f4)"/>
	<polygon points="300,10 240,198 390,78 210,78 360,198" style="fill:lime;stroke:purple;stroke-width:5;fill-rule:nonzero;" filter="url(#f4)"  />
	<polyline points="460,40 540,40 540,80 580,80 580,200 440,100 " style="fill:white;stroke:red;stroke-width:4" filter="url(#f4)"/>
</svg>


path 
<svg viewBox="0 0 600 150">
	<path d="M 0 0 l 50 0 l 0 120 z" style="stroke-width:3;stroke:black;fill:lime;"/>
	<path d="M 60 0 h 50 v 120  z" style="stroke-width:3;stroke:black;fill:lime;"/>
	<path d="M 120 0 l 50 0 v 120 h 50 z" style="stroke-width:3;stroke:black;fill:lime;"/>
	<path d="M 180 0 l 50 0 v 120 h 50" style="stroke-width:3;stroke:black;fill:skyblue;"/>
	<path d="M 240 0 l 50 0 v 120 h 50" style="stroke-width:3;stroke:black;fill:none;"/>
</svg>   


<svg viewBox="0 0 300 300">
	<path d="M 10,10 c 0,0 50,50 0,90 z" style="stroke-width:3;stroke:black;fill:lime;"/>
	<path d="M 10,10 c 0,0 50,50 90,0 z" style="stroke-width:3;stroke:black;fill:purple;"/>
	<path d="M 100,10 c 0,0 -50,50 0,90 z" style="stroke-width:3;stroke:black;fill:skyblue;"/>
	<path d="M 10,100 c 0,0 50,-50 90,0 z" style="stroke-width:3;stroke:black;fill:yellow;"/>
	<path d="M 120,10 s 50,50 90,10 s -40,30 0,70 s -30,-40 -70,0 s 40,-40 -10,-70 z" style="stroke-width:3;stroke:black;fill:yellow;"/>
	<path d="M100,200 C100,100 250,100 250,200 S400,300 400,200" style="fill:none; stroke:red; stroke-width:5"/>	
</svg>   


<svg viewBox="0 0 1200 600">
	<path d="M200,300 Q400,50 600,300 T1000,300" fill="none" stroke="red" stroke-width="5" />
</svg>   


<svg viewBox="0 0 600 150">
	<image xlink:href="/post_inc/html5_animate/test_img14.png" x="0" y="20" width="150" height="150" />
	<text x="0" y="15" fill="red">TEXT & IMAGE</text>
</svg>
TEXT & IMAGE

viewBox : (x y width height)
  • M : moveto - 기준점 (x y)
  • L : lineto - 기준점으로부터 선 그리기 (x y)
  • H : horizontal lineto - 세로 좌표는 그대로 기준점으로부터 선 그리기 (x)
  • v : vertical lineto - 가로 좌표는 그대로 기준점으로부터 선 그리 (y)
  • C : curveto - 곡선 (x1,y1 x2,y2 x,y)
  • S : smooth curveto - 이어지는 곡선 (x2,y2 x,y)
  • Q : quadratic Bezier curve 2차 베지어 곡선 (x1,y1 x,y)
  • T : smooth quadratic Bezier curveto 이어지는 2차 베지어 곡선 (x,y)
  • A : elliptical Arc 타원형의 호
  • Z : closepath 패스닫기
소문자 : 상대적 위치 - 바로전의 기준점으로 부터의 거리
대문자 : 절대적 위치




http://b1ix.net/286 에서 계속....