SVG PATH EDITOR (코드로 SVG 패스 만들기) - 이온디

홈페이지 제작팁

HTML5/CSS3

글쓰기

-

가

+

[svg] SVG PATH EDITOR (코드로 SVG 패스 만들기)

이온디

2022.04.21 16:29

432

0

https://eond.com/444842

object(HotopayModel)#1116 (23) { ["error"]=> int(0) ["message"]=> string(7) "success" ["variables"]=> array(0) { } ["httpStatusCode"]=> int(200) ["module"]=> string(7) "hotopay" ["module_info"]=> NULL ["origin_module_info"]=> NULL ["module_config"]=> NULL ["module_path"]=> string(52) "/home/eond/web/eond.com/public_html/modules/hotopay/" ["xml_info"]=> NULL ["module_srl"]=> NULL ["mid"]=> NULL ["act"]=> NULL ["template_path"]=> NULL ["template_file"]=> NULL ["layout_path"]=> NULL ["layout_file"]=> NULL ["edited_layout_file"]=> NULL ["stop_proc"]=> bool(false) ["user"]=> object(Rhymix\Framework\Helpers\SessionHelper)#1115 (20) { ["member_srl"]=> int(0) ["user_id"]=> NULL ["user_name"]=> NULL ["nick_name"]=> NULL ["email_address"]=> NULL ["phone_number"]=> NULL ["homepage"]=> NULL ["blog"]=> NULL ["birthday"]=> NULL ["denied"]=> NULL ["status"]=> NULL ["is_admin"]=> string(1) "N" ["is_site_admin"]=> NULL ["profile_image"]=> NULL ["image_name"]=> NULL ["image_mark"]=> NULL ["signature"]=> NULL ["description"]=> NULL ["group_list"]=> array(0) { } ["menu_list"]=> array(0) { } } ["request"]=> object(Rhymix\Framework\Request)#10 (13) { ["method"]=> string(3) "GET" ["compat_method"]=> string(3) "GET" ["url"]=> string(28) "coding/444842/comment/465269" ["hostname"]=> string(8) "eond.com" ["domain"]=> NULL ["protocol"]=> string(5) "https" ["callback_function"]=> string(0) "" ["_route_status":protected]=> int(200) ["_route_options":protected]=> object(stdClass)#11 (5) { ["cache_control"]=> bool(true) ["check_csrf"]=> bool(true) ["is_forwarded"]=> bool(false) ["is_indexable"]=> bool(true) ["enable_session"]=> bool(true) } ["module"]=> string(5) "board" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" ["args"]=> array(4) { ["document_srl"]=> string(6) "444842" ["comment_srl"]=> string(6) "465269" ["mid"]=> string(6) "coding" ["act"]=> string(16) "dispBoardContent" } } ["ajaxRequestMethod"]=> array(2) { [0]=> string(6) "XMLRPC" [1]=> string(4) "JSON" } ["gzhandler_enable"]=> bool(true) }

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

라이믹스는 이온디와 함께

Comment 0

댓글작성칸으로

HTML5/CSS3

-

가

+

번호 제목

등록일
공지 코딩 배울 수 있는 사이트 모음(HTML/CSS/JS/IMG/PHP)

웹표준 웹표준 웹표준 웹표준 01/03
공지 jQuery를 배울수 있는 동네들입니다.

jQuery jQuery jQuery jQuery 08/09
공지 관련 링크 1

미분류 미분류 미분류 미분류 05/23
235 [CSS] CSS Grid를 배워보는 링크

CSS CSS CSS CSS 01/31
234 [swiperjs] swiper random shuffle

swiperjs swiperjs swiperjs swiperjs 11/28
233 [swiperjs] swiper.js 숫자 페이징

swiperjs swiperjs swiperjs swiperjs 11/28
232 [swiperjs] swiper.js 기본 템플릿 코드

swiperjs swiperjs swiperjs swiperjs 11/27
231 [위지윅에디터] 프로알라 에디터 이모티콘 커스텀 방법

위지윅에디터 위지윅에디터 위지윅에디터 위지윅에디터 07/25
230 [미분류] 저는 웹 퍼블리셔 입니다.

미분류 미분류 미분류 미분류 09/18
229 [CSS] safari select background glory style

CSS CSS CSS CSS 07/14
228 [Script] News Ticker - 한줄 전광판, 한줄씩 올라가는 스크립트, 뉴스티커

Script Script Script Script 08/07
227 [CSS] css 글자 나누기

CSS CSS CSS CSS 05/10
» [svg] SVG PATH EDITOR (코드로 SVG 패스 만들기)

svg svg svg svg 04/21
225 [위지윅에디터] ckeditor5

위지윅에디터 위지윅에디터 위지윅에디터 위지윅에디터 04/11
224 [map] 카카오맵 퍼블리싱

map map map map 03/31
223 [Meta] meta viewport 모바일에서 PC 사이즈 그대로 보기

Meta Meta Meta Meta 01/09
222 [프레임워크] Material design

프레임워크 프레임워크 프레임워크 프레임워크 07/02
221 [반응형 웹] 기기별 미디어쿼리 사이즈,모바일 디바이스별 사이즈

반응형 웹 반응형 웹 반응형 웹 반응형 웹 05/02
220 Web Fundamentals

05/02
219 [반응형 웹] 모바일 사이드바 만들기

반응형 웹 반응형 웹 반응형 웹 반응형 웹 04/10
218 [위지윅에디터] Web-Based HTML Editor 비교 및 미리보기

위지윅에디터 위지윅에디터 위지윅에디터 위지윅에디터 08/25
217 [부트스트랩] New Bootstrap 4 alpha

부트스트랩 부트스트랩 부트스트랩 부트스트랩 08/27
216 [프레임워크] [UI Kit] CSS Framework 어떤 것을 사용할 것인가? 출처: https://mobicon.tistory.com/353 [Intelligence Convergence]

프레임워크 프레임워크 프레임워크 프레임워크 03/21

1 2 3 4 5 6 7 8 9 10

글쓰기

전체 게시판