SVG 튜 토리 얼 (3) 원형, 타원, 직선

SVG
SVG 원형 - < circle >
< circle > 탭 은 원 을 만 드 는 데 사용 할 수 있 습 니 다:
다음은 SVG 코드 입 니 다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <circle cx="100" cy="50" r="40" stroke="black"
  stroke-width="2" fill="red"/>
</svg>

Opera 사용자: SVG 파일 보기 (SVG 그래 픽 미리 보기 원본 을 오른쪽 클릭).
코드 분석:

cx 와 cy 속성 은 원점 의 x 와 y 좌 표를 정의 합 니 다.cx 와 cy 를 생략 하면 원 의 중심 은 (0, 0)

로 설 치 됩 니 다.

r 속성 정의 원 의 반지름 SVG < ellipse >
SVG 타원 - < ellipse > 인 스 턴 스 1 < ellipse > 요 소 는 타원 을 만 드 는 데 사 용 됩 니 다. 타원 은 원 과 비슷 합 니 다.다른 점 은 타원 에 서로 다른 x 와 y 반지름 이 있 고 원 의 x 와 y 반지름 은 같다 는 것 이다. 다음은 SVG 코드 이다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="300" cy="80" rx="100" ry="50"
  style="fill:yellow;stroke:purple;stroke-width:2"/>
</svg>

Opera 사용자: SVG 파일 보기 (SVG 그래 픽 미리 보기 원본 을 오른쪽 클릭).코드 분석:

CX 속성 이 정의 하 는 타원 중심의 x 좌표

CY 속성 이 정의 하 는 타원 중심의 y 좌표

RX 속성 정의 수평 반경

RY 속성 정의 수직 반경

인 스 턴 스 2 아래 의 예 는 세 개의 겹 쳐 진 타원 을 만 들 었 습 니 다. 다음은 SVG 코드 입 니 다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="100" rx="220" ry="30" style="fill:purple"/>
  <ellipse cx="220" cy="70" rx="190" ry="20" style="fill:lime"/>
  <ellipse cx="210" cy="45" rx="170" ry="15" style="fill:yellow"/>
</svg>

Opera 사용자: SVG 파일 보기 (SVG 그래 픽 미리 보기 원본 을 오른쪽 클릭).
인 스 턴 스 3 아래 의 예 는 타원 두 개 를 조합 했다. (노란색 하나 와 흰색 하나) 다음은 SVG 코드 이다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <ellipse cx="240" cy="50" rx="220" ry="30" style="fill:yellow"/>
  <ellipse cx="220" cy="50" rx="190" ry="20" style="fill:white"/>
</svg>

Opera 사용자: SVG 파일 보기 (SVG 그래 픽 미리 보기 원본 을 오른쪽 클릭).

SVG

SVG 직선 - < line > < line > 요 소 는 직선 을 만 드 는 데 사 용 됩 니 다. 다음은 SVG 코드 입 니 다.

<svg xmlns="http://www.w3.org/2000/svg" version="1.1">
  <line x1="0" y1="0" x2="200" y2="200"
  style="stroke:rgb(255,0,0);stroke-width:2"/>
</svg>

Opera 사용자: SVG 파일 보기 SVG 그래 픽 미리 보기 원본 을 오른쪽 클릭 합 니 다.

x1 속성 은 x 축 정의 선의 시작

y1 속성 은 y 축 정의 선의 시작

x2 속성 은 x 축 정의 라인 의 끝

y2 속성 은 y 축 정의 라인 의 끝

원문: http://www.runoob.com/svg/svg-line.html
다음으로 이동: SVG 튜 토리 얼 (3) 원형, 타원, 직선

이 내용에 흥미가 있습니까?

현재 기사가 여러분의 문제를 해결하지 못하는 경우 AI 엔진은 머신러닝 분석(스마트 모델이 방금 만들어져 부정확한 경우가 있을 수 있음)을 통해 가장 유사한 기사를 추천합니다:

Apple의 다크 모드 아이콘 재현

몇 주 전에 iPhone의 제어 센터를 만지작거리면서 "다크 모드"라는 새 아이콘을 발견했습니다. 대부분 태양과 달이 포함된 '다크 모드' 아이콘을 많이 보았지만 이 아이콘은 매우 간단하고 직관적입니다. SVG로 다...

텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.

CC BY-SA 2.5, CC BY-SA 3.0 및 CC BY-SA 4.0에 따라 라이센스가 부여됩니다.

SVG 튜 토리 얼 (3) 원형, 타원, 직선

좋은 웹페이지 즐겨찾기