SVG 튜토리얼

SVG 요소

SVG <rect> 사각형 그리기

rect 요소는 SVG의 기본 모양 중 하나로, 사각형을 만들기 위해一角 위치와 너비, 높이를 기반으로 사용됩니다. 또한 둥근 모서리 사각형을 만들기도 합니다.

SVG <rect> 요소는 사각형을 나타냅니다. 이 요소를 사용하면 다양한 너비, 높이, 다른 선(경계선)과 채우기 색상, 날카로운 모서리나 둥근 모서리 등을 가진 사각형을 그릴 수 있습니다.

온라인 예제

rect 사용 예제:

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　　<rect　x="10"　y="10"　height="100"　width="100"
　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/></svg>

테스트를 해보세요 ‹/›

사각형의 위치는 x와 y 속성으로 결정됩니다. 기억해야 할 것은 이 위치는 어떤 닫힌(부모) 요소의 위치에 대해 상대적입니다.
사각형의 크기는 width와 height 속성으로 결정됩니다.
style 속성은 다른 스타일 정보를 설정할 수 있습니다. 예를 들어, 텍스트의 색상과 채움, 텍스트의 너비 등을 설정할 수 있습니다. 이는 다른 문서에서 자세히 설명됩니다.
생성된 사각형 이미지는 다음과 같습니다:

둥근 사각형

사각형에 둥근 테두리를 그릴 수 있습니다. 속성 rx와 ry는 테두리 꼭짓점의 둥근 테두리를 결정합니다. rx 속성은 둥근 테두리의 너비를 결정하며, ry 속성은 둥근 테두리의 높이를 결정합니다. 여기서 rx와 ry를 모두 설정한 세 개의 사각형이 있습니다.5，10와15다음은 둥근 테두리에서의 다른 크기입니다.

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="5"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="70"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="10"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="15"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

테스트를 해보세요 ‹/›

생성된 둥근 사각형 효과는 다음과 같습니다:

이 예제들에서 각 사각형의 rx와 ry는 같은 값을 설정했습니다. rx 속성만 설정하면 ry 속성도 같은 값을 받습니다. 이는 일관된 둥근 테두리를 정의하는 빠른 방법입니다.
rx 속성을 모두 설정한 두 개의 사각형이 있습니다.10을 설정하지만, ry 속성을 각각 다르게 설정합니다.5와15의 예제입니다. 이는 다양한 높이와 너비에서 연달아서 사각형의 외관을 보여줍니다.

예제

<svg　xmlns="http://www.w3.org/2000/svg"
　　　　　xmlns:xlink="http://www.w3.org/1999/xlink">
　　　　<rect　x="10"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="5"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
　　　　<rect　x="130"　y="10"　height="50"　width="50"
　　　　　　　　　　rx="10"　ry="15"
　　　　　　　　　　style="stroke:#006600;　fill:　#00cc00"/>
</svg>

테스트를 해보세요 ‹/›

사각형 촉락

SVG stroke 스타일 속성을 사용하여 사각형의 테두리(촉락) 스타일을 설정할 수 있습니다. 이 예제에서 stroke 색상을 검은 녹색으로 설정하고, 테두리 너비를 설정합니다:3:

예제

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　fill:　none;
　　　　　　"
　　　　　　/></svg>

테스트를 해보세요 ‹/›

rect가 브라우저에서 표시될 때, 요소의 외관 효과는 다음과 같습니다:

style 속성 stroke를 사용할 수도 있습니다.-dasharray는 사각형 테두리를 선형으로 만듭니다. 다음은 예제입니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　　　　　stroke-width:　3;
　　　　　　　　　　　　　stroke-dasharray:　10　5;
　　　　　　　　　　　　　fill:　none;
　　　　　　　　　　　　"
　　　　　　　　/></svg>

테스트를 해보세요 ‹/›

위 코드의 실행 결과는 다음과 같습니다::

사각형 채움

SVG 채움 스타일 속성을 사용하여 사각형을 채울 수 있습니다. 예를 들어, style 속성 fill을 none으로 설정하여 요소를 채우지 않을 수 있습니다.

예제

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"　
　　　　　　　　　　　　style="stroke:　#009900;fill:　none;"　/></svg>

테스트를 해보세요 ‹/›

rect가 브라우저에서 표시될 때, 채움 없이 보이는 요소의 외관은 다음과 같습니다:

사각형을 색상으로 채울 수도 있습니다. 이 예제에서 rect는 밝은 녹색으로 요소를 채웠습니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">　
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;fill:　#33ff33;"/>
</svg>

테스트를 해보세요 ‹/›

다음은 브라우저에서 rect를 채움으로 표시하는 효과입니다:

style 속성 fill을 사용할 수도 있습니다.-opacity는 채움을 투명하게 만듭니다. 이 예제에서는 두 개의 사각형이 있는 것을 보여주고 있으며, 하나의 사각형은 다른 사각형의 위에 있으며, 위의 사각형은 반투명합니다:

예제

<svg　xmlns="http://www.w3.org/2000/svg"　xmlns:xlink="http://www.w3.org/1999/xlink">
<rect　x="20"　y="20"　width="100"　height="100"
　　　　　　style="stroke:　#009900;
　　　　　　　　　fill:　#33ff33;
　　　　　　　　"
　　　　　　　　/>
<rect　x="50"　y="50"　width="100"　height="100"
　　　　　　style="stroke:　#000099;
　　　　　　　　　fill:　#3333ff;
　　　　　　　　　fill-opacity:　0.5;
　　　　　　　　"
　　　　　　　　/></svg>

테스트를 해보세요 ‹/›

이는 rect이 브라우저에서 표시될 때 요소의 반투명한 외관 효과입니다:

이 예제에서 두 번째 사각형의 선은 투명하지 않지만 style 속성을 사용하여 stroke를-opacity로 투명하게 만듭니다.

SVG <circle> 원 그리기 SVG <g> 요소