SVG 모양
SVG는 개발자에 의해 사용될 수있는 미리 정의 된 형상 요소가 있습니다 :
- 직사각형 <rect>
- 원 <circle>
- 타원 <ellipse>
- 선 <line>
- 폴리 라인 <polyline>
- 다각형 <polygon>
- 경로 <path>
다음 장에서는 RECT 요소로 시작, 각 요소를 설명합니다.
SVG 사각형 - <rect>
예 1
<rect> 요소는 사각형과 사각형 모양의 변형을 만드는 데 사용됩니다 :
다음은 SVG 코드는 다음과 같습니다
예
<svg width="400" height="110">
<rect width="300" height="100"
style="fill:rgb(0,0,255);stroke-width:3;stroke:rgb(0,0,0)" />
</svg>
»그것을 자신을 시도 Code explanation:
- 의 폭 및 높이의 속성 <rect> 요소의 높이와 직사각형의 폭을 정의
- style 속성은 구형의 CSS 속성을 정의하는 데 사용됩니다
- CSS를 채우기 속성은 사각형의 채우기 색을 정의
- CSS의 스트로크 폭 속성은 사각형의 테두리의 폭을 정의
- CSS의 스트로크 속성은 사각형의 테두리의 색상을 정의
예 2
의 몇 가지 새로운 특성을 포함하는 다른 예를 살펴 보자 :
다음은 SVG 코드는 다음과 같습니다
예
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;fill-opacity:0.1;stroke-opacity:0.9"
/>
</svg>
»그것을 자신을 시도 Code explanation:
- x 속성은 사각형의 왼쪽 위치를 정의 (예 : X = "50"왼쪽 여백에서 사각형 50 픽셀을 배치)
- y 속성은 사각형의 상단 위치를 정의합니다 (예 : y를 = "20"위쪽 여백에서 사각형 20 픽셀을 배치)
- CSS의 채우기 불투명도 속성은 채우기 색상의 불투명도 정의 (legal range: 0 to 1)
- CSS의 스트로크 - 불투명도 속성은 선 색상의 불투명도 정의 (legal range: 0 to 1)
예 3
전체 요소의 투명도를 정의합니다 :
다음은 SVG 코드는 다음과 같습니다
예
<svg width="400" height="180">
<rect x="50" y="20" width="150" height="150"
style="fill:blue;stroke:pink;stroke-width:5;opacity:0.5" />
</svg>
»그것을 자신을 시도 Code explanation:
- CSS의 불투명도 속성은 전체 요소의 불투명도 값을 정의합니다 (legal range: 0 to 1)
예 4
마지막 예는 모서리가 둥근 사각형을 만들 :
다음은 SVG 코드는 다음과 같습니다
예
<svg width="400" height="180">
<rect x="50" y="20" rx="20" ry="20" width="150"
height="150"
style="fill:red;stroke:black;stroke-width:5;opacity:0.5" />
</svg>
»그것을 자신을 시도 Code explanation:
- 수신 기기와 ry 속성은 사각형의 모서리를 라운드