instrument control valve, shutoff valve icon built by own
This commit is contained in:
56
html/assets/images/icons/icons.svg
Normal file
56
html/assets/images/icons/icons.svg
Normal file
@@ -0,0 +1,56 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
|
||||
<defs>
|
||||
<!-- Control Valve Icon - 512x512 viewBox -->
|
||||
<symbol id="icon-cv" viewBox="0 0 512 512">
|
||||
<g fill="currentColor">
|
||||
<!-- 왼쪽 액추에이터 (삼각형) -->
|
||||
<path d="M 120 310 L 120 490 L 246 400 Z"/>
|
||||
|
||||
<!-- 오른쪽 액추에이터 (삼각형) -->
|
||||
<path d="M 392 310 L 392 490 L 266 400 Z"/>
|
||||
|
||||
<!-- 중앙 스템 (두꺼운 선) -->
|
||||
<rect x="246" y="230" width="20" height="170" rx="10"/>
|
||||
|
||||
<!-- 밸브 본체 (아치형) -->
|
||||
<path d="M 100 230 Q 256 80, 412 230"
|
||||
stroke="currentColor"
|
||||
stroke-width="30"
|
||||
fill="none"
|
||||
stroke-linecap="round"/>
|
||||
|
||||
<!-- 밸브 본체 하단 -->
|
||||
<path d="M 100 230 L 100 250 L 412 250 L 412 230"
|
||||
fill="currentColor"/>
|
||||
</g>
|
||||
</symbol>
|
||||
|
||||
<!-- XV Valve Icon - 512x512 viewBox -->
|
||||
<symbol id="icon-xv" viewBox="0 0 512 512">
|
||||
<g fill="currentColor">
|
||||
<!-- 왼쪽 액추에이터 -->
|
||||
<path d="M 120 290 L 120 470 L 246 380 Z"/>
|
||||
|
||||
<!-- 오른쪽 액추에이터 -->
|
||||
<path d="M 392 290 L 392 470 L 266 380 Z"/>
|
||||
|
||||
<!-- 중앙 스템 -->
|
||||
<rect x="246" y="210" width="20" height="170" rx="10"/>
|
||||
|
||||
<!-- 상단 사각형 케이스 (외곽) -->
|
||||
<rect x="156" y="50" width="200" height="160"
|
||||
stroke="currentColor"
|
||||
stroke-width="20"
|
||||
fill="none"
|
||||
rx="10"/>
|
||||
|
||||
<!-- 내부 사각형 -->
|
||||
<rect x="156" y="50" width="200" height="50"
|
||||
stroke="currentColor"
|
||||
stroke-width="15"
|
||||
fill="none"
|
||||
rx="5"/>
|
||||
</g>
|
||||
</symbol>
|
||||
</defs>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 1.8 KiB |
243
html/assets/images/icons/orginalSVG/CV.svg
Normal file
243
html/assets/images/icons/orginalSVG/CV.svg
Normal file
@@ -0,0 +1,243 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="CV"
|
||||
sodipodi:docname="CV.svg"
|
||||
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
showguides="true"
|
||||
inkscape:lockguides="true"
|
||||
inkscape:zoom="16"
|
||||
inkscape:cx="21.4375"
|
||||
inkscape:cy="18.53125"
|
||||
inkscape:window-width="2560"
|
||||
inkscape:window-height="1406"
|
||||
inkscape:window-x="-11"
|
||||
inkscape:window-y="-11"
|
||||
inkscape:window-maximized="1"
|
||||
inkscape:current-layer="icon-cv">
|
||||
<inkscape:grid
|
||||
id="grid2"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="0.26458332"
|
||||
spacingy="0.26458332"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
enabled="true"
|
||||
visible="true" />
|
||||
<sodipodi:guide
|
||||
position="4.2627494,9.4789286"
|
||||
orientation="1,0"
|
||||
id="guide2"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="0.51737855,-0.29502712"
|
||||
orientation="1,0"
|
||||
id="guide3"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-0.65234687,-0.63244791"
|
||||
orientation="0.70710678,-0.70710678"
|
||||
id="guide4"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="7.9518834,9.523918"
|
||||
orientation="1,0"
|
||||
id="guide5"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="9.0991141,4.2601536"
|
||||
orientation="0,-1"
|
||||
id="guide6"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="8.784188,7.9267929"
|
||||
orientation="0,-1"
|
||||
id="guide7"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.6983513,0.78471943"
|
||||
orientation="0,-1"
|
||||
id="guide8"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.8670617,0.51478279"
|
||||
orientation="0,-1"
|
||||
id="guide9"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="4.4652019,4.0464538"
|
||||
orientation="-0.70710678,-0.70710678"
|
||||
id="guide10"
|
||||
inkscape:locked="true" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="swatch6"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop6" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch5"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop5" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch4"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch3"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop3" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch2"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop2" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch1"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch18"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop18" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch16"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop16" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch15"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop15" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch14"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#2864eb;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient18"
|
||||
x1="1.7277834"
|
||||
y1="5.9455218"
|
||||
x2="8.4411774"
|
||||
y2="5.9455218"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.66393903,0,0,0.85634804,2.3787064,1.2196347)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient1"
|
||||
x1="4.0094132"
|
||||
y1="5.0275702"
|
||||
x2="4.5385804"
|
||||
y2="5.0275702"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-0.02338608)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient5"
|
||||
x1="0.96664286"
|
||||
y1="-2.2531047"
|
||||
x2="7.6929812"
|
||||
y2="-2.2531047"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.95980837,0,0,-0.92117588,0.10386417,0.02559155)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient6"
|
||||
x1="0.84656554"
|
||||
y1="6.2969909"
|
||||
x2="4.0181665"
|
||||
y2="6.2969909"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(-0.02338609,-0.02338608)" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="icon-cv">
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient18);stroke-width:0.529167;stroke-dasharray:none"
|
||||
d="M 7.6511642,4.8306254 V 7.7779116 L 4.4998531,6.2561101 Z"
|
||||
id="path14-1" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient6);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0.83074929,4.7858732 V 7.7610021 L 3.977069,6.2248243 Z"
|
||||
id="path14-1-7" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.2506107,3.8353499 V 6.2197903"
|
||||
id="path19" />
|
||||
<path
|
||||
id="path4"
|
||||
style="fill:none;stroke:url(#linearGradient5);stroke-width:0.497572"
|
||||
d="m 7.2337027,3.69276 a 2.9740486,3.1851437 0 0 0 -1.4870244,-2.7584154 2.9740486,3.1851437 0 0 0 -2.9740486,7e-8 A 2.9740486,3.1851437 0 0 0 1.2856054,3.69276 Z" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 7.0 KiB |
227
html/assets/images/icons/orginalSVG/XV.svg
Normal file
227
html/assets/images/icons/orginalSVG/XV.svg
Normal file
@@ -0,0 +1,227 @@
|
||||
<?xml version="1.0" encoding="UTF-8" standalone="no"?>
|
||||
<!-- Created with Inkscape (http://www.inkscape.org/) -->
|
||||
|
||||
<svg
|
||||
width="32"
|
||||
height="32"
|
||||
viewBox="0 0 8.4666662 8.4666662"
|
||||
version="1.1"
|
||||
id="svg1"
|
||||
sodipodi:docname="XV.svg"
|
||||
inkscape:version="1.4.2 (f4327f4, 2025-05-13)"
|
||||
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
|
||||
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
|
||||
xmlns:xlink="http://www.w3.org/1999/xlink"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
xmlns:svg="http://www.w3.org/2000/svg">
|
||||
<sodipodi:namedview
|
||||
id="namedview1"
|
||||
pagecolor="#ffffff"
|
||||
bordercolor="#000000"
|
||||
borderopacity="0.25"
|
||||
inkscape:showpageshadow="2"
|
||||
inkscape:pageopacity="0.0"
|
||||
inkscape:pagecheckerboard="0"
|
||||
inkscape:deskcolor="#d1d1d1"
|
||||
inkscape:document-units="mm"
|
||||
showgrid="true"
|
||||
showguides="true"
|
||||
inkscape:lockguides="true"
|
||||
inkscape:zoom="18.234375"
|
||||
inkscape:cx="9.5972581"
|
||||
inkscape:cy="15.218509"
|
||||
inkscape:window-width="1138"
|
||||
inkscape:window-height="1240"
|
||||
inkscape:window-x="646"
|
||||
inkscape:window-y="16"
|
||||
inkscape:window-maximized="0"
|
||||
inkscape:current-layer="icon-XV">
|
||||
<inkscape:grid
|
||||
id="grid2"
|
||||
units="px"
|
||||
originx="0"
|
||||
originy="0"
|
||||
spacingx="0.26458332"
|
||||
spacingy="0.26458332"
|
||||
empcolor="#0099e5"
|
||||
empopacity="0.30196078"
|
||||
color="#0099e5"
|
||||
opacity="0.14901961"
|
||||
empspacing="5"
|
||||
enabled="true"
|
||||
visible="true" />
|
||||
<sodipodi:guide
|
||||
position="4.2627494,9.4789286"
|
||||
orientation="1,0"
|
||||
id="guide2"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="0.51737855,-0.29502712"
|
||||
orientation="1,0"
|
||||
id="guide3"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-0.65234687,-0.63244791"
|
||||
orientation="0.70710678,-0.70710678"
|
||||
id="guide4"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="7.9518834,9.523918"
|
||||
orientation="1,0"
|
||||
id="guide5"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="9.0991141,4.2601536"
|
||||
orientation="0,-1"
|
||||
id="guide6"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="8.784188,7.9267929"
|
||||
orientation="0,-1"
|
||||
id="guide7"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.6983513,0.78471943"
|
||||
orientation="0,-1"
|
||||
id="guide8"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="-1.8670617,0.51478279"
|
||||
orientation="0,-1"
|
||||
id="guide9"
|
||||
inkscape:locked="true" />
|
||||
<sodipodi:guide
|
||||
position="4.4652019,4.0464538"
|
||||
orientation="-0.70710678,-0.70710678"
|
||||
id="guide10"
|
||||
inkscape:locked="true" />
|
||||
</sodipodi:namedview>
|
||||
<defs
|
||||
id="defs1">
|
||||
<linearGradient
|
||||
id="swatch4"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop4" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch3"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop3" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch2"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop2" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch1"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop1" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch18"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop18" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch16"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop16" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch15"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#000000;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop15" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
id="swatch14"
|
||||
inkscape:swatch="solid">
|
||||
<stop
|
||||
style="stop-color:#2864eb;stop-opacity:1;"
|
||||
offset="0"
|
||||
id="stop14" />
|
||||
</linearGradient>
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient16"
|
||||
x1="1.4266078"
|
||||
y1="2.1372342"
|
||||
x2="7.144485"
|
||||
y2="2.1372342"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="matrix(0.87269478,0,0,1.0101615,0.51750303,0.21044164)" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient1"
|
||||
x1="4.0094132"
|
||||
y1="5.0275702"
|
||||
x2="4.5385804"
|
||||
y2="5.0275702"
|
||||
gradientUnits="userSpaceOnUse" />
|
||||
<linearGradient
|
||||
inkscape:collect="always"
|
||||
xlink:href="#swatch14"
|
||||
id="linearGradient2"
|
||||
x1="1.973379"
|
||||
y1="1.8645531"
|
||||
x2="6.5005426"
|
||||
y2="1.8645531"
|
||||
gradientUnits="userSpaceOnUse"
|
||||
gradientTransform="translate(0,0.0725507)" />
|
||||
</defs>
|
||||
<g
|
||||
inkscape:label="Layer 1"
|
||||
inkscape:groupmode="layer"
|
||||
id="icon-XV">
|
||||
<ellipse
|
||||
style="fill:none;fill-opacity:1;stroke-width:0.265;stroke-dasharray:none"
|
||||
id="path10"
|
||||
cx="4.2402544"
|
||||
cy="4.1840181"
|
||||
rx="2.901819"
|
||||
ry="2.9917979" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient16);stroke-width:0.496843;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 1.8622283,0.77852414 6.6375951,0.75580052 6.6521989,3.9370624 1.8622288,3.9825089 Z"
|
||||
id="path12" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 7.5471292,4.78219 V 7.7294762 L 4.3958181,6.2076747 Z"
|
||||
id="path14-1" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:#2864eb;stroke-width:0.52916667;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 0.89517625,4.7887389 V 7.7638678 L 4.041496,6.22769 Z"
|
||||
id="path14-1-7" />
|
||||
<path
|
||||
style="fill:none;fill-opacity:1;stroke:url(#linearGradient1);stroke-width:0.529167;stroke-dasharray:none;stroke-opacity:1"
|
||||
d="M 4.2739968,3.8353499 V 6.2197903"
|
||||
id="path19" />
|
||||
<path
|
||||
style="fill:none;stroke:url(#linearGradient2);stroke-width:0.264583"
|
||||
d="m 1.973379,1.9516138 c 4.5271635,-0.02902 4.5271635,-0.02902 4.5271635,-0.02902"
|
||||
id="path1" />
|
||||
</g>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 6.6 KiB |
BIN
html/assets/images/icons/path.png
Normal file
BIN
html/assets/images/icons/path.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
26
html/assets/images/icons/path좌표문자.md
Normal file
26
html/assets/images/icons/path좌표문자.md
Normal file
@@ -0,0 +1,26 @@
|
||||
이제 SVG 명령어들을 한눈에 볼 수 있는 요약표를 만들어드릴게요. 과 처럼 대문자/소문자의 차이는 절대 좌표 vs 상대 좌표라는 점을 기억하시면 됩니다.
|
||||
|
||||
🔹 주요 Path 명령어 요약표
|
||||
|
||||

|
||||
|
||||
🔹 주요 Path 명령어 요약표
|
||||
|
||||
| 명령어 | 의미 | 대문자(절대) | 소문자(상대) | 예시 |
|
||||
|--------|------|--------------|--------------|------|
|
||||
| **M / m** | Move To (좌표 이동) | 지정한 좌표로 이동 | 현재 위치 기준으로 이동 | `M 10 20` / `m 10 20` |
|
||||
| **L / l** | Line To (직선 그리기) | 지정 좌표까지 직선 | 현재 위치에서 상대 이동 직선 | `L 30 40` / `l 30 40` |
|
||||
| **H / h** | Horizontal Line | 지정 x좌표까지 수평선 | 현재 위치에서 x축 상대 이동 | `H 50` / `h 50` |
|
||||
| **V / v** | Vertical Line | 지정 y좌표까지 수직선 | 현재 위치에서 y축 상대 이동 | `V 60` / `v 60` |
|
||||
| **C / c** | Cubic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `C x1 y1, x2 y2, x y` |
|
||||
| **Q / q** | Quadratic Bézier Curve | 절대 좌표로 곡선 제어점 지정 | 상대 좌표로 곡선 제어점 지정 | `Q x1 y1, x y` |
|
||||
| **A / a** | Arc (호 그리기) | 절대 좌표로 원호 | 상대 좌표로 원호 | `A rx ry x-axis-rotation large-arc-flag sweep-flag x y` |
|
||||
| **Z / z** | Close Path | 현재 경로를 시작점과 연결해 닫기 | 동일 | `Z` |
|
||||
|
||||
|
||||
|
||||
|
||||
🔹 핵심 정리
|
||||
• 대문자 → 절대 좌표 (캔버스 기준)
|
||||
• 소문자 → 상대 좌표 (현재 위치 기준)
|
||||
• /은 시작점 이동, /은 직선, /는 곡선, 는 닫기
|
||||
Reference in New Issue
Block a user