SVG로 선 그리기

6179 단어 HTMLSVGtech

개요


svg <path> 요소를 사용하여 선을 그립니다.

사용할 매개변수

  • d: 경로 속성
  • M: 경로 지정(Move To 명령)
  • x, y를 매개 변수로 하고 x, y 좌표가 지정한 경로 위치를 지정한다
  • L: 선(Litto 명령)
  • x, y는 현재 위치에서 지정한 좌표선을 따라 파라미터를 가진다

    • 선 그리기


    좌표x=10,y=10점부터 x=50,y=10로 선을 그립니다.
    <svg widht="200" height="200" xmlns="http://www.w3.org/2000/svg">
 	<g fill="#fff" stroke="#000" stroke-width="1">
 		<path d="M10,10 L50,10" />
 	</g>
 </svg>
    가로로 확장된 선을 그립니다.↓↓↓
    Image from Gyazo

    폴리라인 그리기


    좌표x=10, y=10점에서 x=50, y=10까지 선을 그립니다.x=50,y=10지점에서x=50,y=100지점까지 새로운 선을 그립니다.
    <svg widht="200" height="200" xmlns="http://www.w3.org/2000/svg">
  	<g fill="#fff" stroke="#000" stroke-width="1">
 		<path d="M10,10 L50,10 50,100" />
 	</g>
  </svg>
    는 가로로 뻗고 아래로 굴절되는 선을 그렸다.↓↓↓
    Image from Gyazo

    인용하다

  • Paths | MDN
    • Swift 시작: 조건문
    📐 Blog Format - Contents

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage