첨부파일 https://imweb.eond.com/coding/444842


SVG PATH EDITOR(이하 'SPE')는 브라우저에서 직접 점을 찍고 PATH 커브를 지정할 수 있습니다.

처음 브라우저를 열면 칼이 나오는데 좌측 상단 PATH 입력칸을 지우면 모두 지워집니다.

그리고 COMMANDS에 보면 M, C, Z라고 나오는데

M은 좌표 시작점, C는 커브값, Z는 패스를 닫는다는 뜻입니다.


https://codepen.io/eond/pen/WNdmoEp

SVG를 이용하여 WAVE를 만드는데, 좀 더 다양한 모양의 웨이브를 만들고 싶어서 시작했는데 포기했습니다.

패스 만들기가 너무 어렵네요.


https://codepen.io/eond/pen/KKZEmda?editors=1100

일단 해보긴 해봤는데 -_-; 패스 자체가 안 이쁘니깐 효과도 안 이쁘네요.

<svg viewBox="0 -50 150 86"> 이 부분이 SPE에서 CONFIGURATION X,Y, Width, Height 값을 지정합니다.

minify output 를 체크해서 사용했습니다.

<svg...>

<defs>

<path d="....."> (d="" 이 안에 defs 코드 안에  SPE에서 생성한 path 코드를 넣어줍니다.)

</defs>

</svg>

path는 id를 지정할 수 있습니다.

<g class="parallax">
<use xlink:href="#gentle-wave2" x="48" y="0" fill="rgba(255,255,255,0.7"></use>
<use xlink:href="#gentle-wave2" x="48" y="3" fill="rgba(255,255,255,0.5)"></use>
<use xlink:href="#gentle-wave2" x="48" y="5" fill="rgba(255,255,255,0.3)"></use>
<use xlink:href="#gentle-wave2" x="48" y="7" fill="#f8f8f8"></use>
    </g>

그래서 <svg><defs><path...></defs><g>...</g> 이런 코드를 사용해서 path에서 지정한 아이디값을 xlink:href에 넣어서 여러개를 만들고, x,y값과 색상값을 지정해서 사용할 수 있습니다.


브라우저 캔바스는 직접 확대 축소해서 사용할 수 있는데 나중에 viewbox 를 다시 조정해서 내가 원하는 코드를 만들 수 있습니다.

원하는 뷰박스 사이즈를 지정한 뒤에는 lock 아이콘을 클릭해서 확대 축소를 잠그게 할 수도 있습니다.


참조 :

https://css-tricks.com/tools-visualize-edit-svg-paths-kinda/

https://yqnn.github.io/svg-path-editor/

https://mavo.io/demos/svgpath/

https://developer.mozilla.org/ko/docs/Web/SVG/Attribute/d

https://svgontheweb.com/ko/

https://velog.io/@bangina/%EC%99%95%EC%B4%88%EB%B3%B4%EB%8F%84-%EA%B0%80%EB%8A%A5%ED%95%9C-SVG-%EC%95%A0%EB%8B%88%EB%A9%94%EC%9D%B4%EC%85%98-%EB%A7%8C%EB%93%A4%EA%B8%B0-feat.-Figma%EB%AC%B4%EB%A3%8C

코멘트 0
접기/펴기 | 댓글 새로고침
 
 
Total 235 articles in 4 / 12 pages
번호 제목 제목 날짜날짜
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP) 2018/01/03
공지 jQuery를 배울수 있는 동네들입니다. 2013/08/09
공지 관련 링크 [1] 2010/05/23
175 [크로스브라우징] Azure Remote App 2015/08/31
174 [Script] jQuery Cookie(쿠키) 처리 [출처] jQuery Cookie(쿠키) 처리|작성자 주용준 2015/08/27
173 [PHP] 쿠키를 굽자 2013/02/22
172 [Script] 쿠키 레이어 열기 닫기 PHP, Only Cookie - Hide/Show 2013/09/08
171 [반응형 웹] 반응형 템플릿 (naradesign) 2015/08/26
170 [반응형 웹] 반응형웹(MediaQuery) 템플릿 파일 2015/08/26
169 [위지윅에디터] ckeditor 공식사이트 2015/08/25
168 [위지윅에디터] 기타 위지윅 에디터 2015/08/25
167 [위지윅에디터] 오픈소스 HTML 기반의 위지윅 에디터 2015/08/25
166 [반응형 웹] 모바일 실제 해상도와 device-width 2015/08/24
165 [반응형 웹] [다음 TROY] 기기별 모바일 해상도 테스트 할 수 있는 사이트 2015/08/22
164 [반응형 웹] responsive-animated-block-menu 2015/08/15
163 [프레임워크] http://view.jquerymobile.com/master/demos/ 2015/08/10
162 [프레임워크] http://pages.revox.io/doc/jquery/form_wizard.php 2015/08/10
161 [프레임워크] jquery-steps.com 2015/08/10
160 [프레임워크] http://getuikit.com 2015/08/09
159 [jQuery] jQuery Image Slider and Gallery 2015/05/27
158 [Script] Top으로 스크롤 되면서 돌아가기... (by sisims) 파일 2014/09/29
157 [Script] 슬라이드 이미지 2014/06/16
156 [Script] 간단한 javascript 페이징 처리 - 미니페이지 2014/06/16

해시태그 디렉터리

지금 이순간

오늘의 핫게시물