SVG 그리기 기본 이미지

svg
http://www.ruanyifeng.com/blog/2018/08/svg.html
1,svg 삽입 인터페이스
방법1:svg 라벨로 인터페이스에 직접 삽입
방법2: embed iframe 태그에 외부 파일 형식으로 삽입
방법3: css의 배경 그림으로 인터페이스에 삽입
2,svg 태그 사용
기본 그래픽

svg
그 중width와height 속성은 canvas의 속성과 유사하며 현재svg 파일이 부모 요소의 폭을 나타냅니다.기본svg 크기는 300입니다×150px.width와height도 픽셀 정의를 사용할 수 있습니다. (응답식을 위해 보통 백분율 정의를 사용합니다.)
viewBox는 뷰포트를 나타냅니다.처음 두 개는 좌표(왼쪽 위 각도는 00, 이때 50, 50부터 시작)이고 다음 두 개는 길이와 너비(50-100, 50-100의 도형)를 나타낸다.실제로 얻은svg 도형은 인터페이스의 오른쪽 하단의 일부분입니다.
circle
그 중에서 cx-cy는 원심의 좌표를 나타내고 왼쪽 상단의 원점의 원심의 위치를 나타낸다.r는 반지름을 나타냅니다.class는 클래스 이름을 표시하고 배경색을 줄 수 있습니다.

.redCircle {
  fill: red; /*     */
  stroke: black; /*     */
  stroke-width: 3pt; /*      */
}
/*    pt  (point) 9pt == 12px */

Px는 픽셀로 실제 길이는 화면 해상도와 관련이 있어 보통 표시에 사용된다.pt는 점이고 실제 길이는 고정되어 있으며 보통 글씨체 인쇄와 같다.
line
세그먼트from (x1, y1) to (x2, y2)
속성은 stroke stroke-width만 채워지지 않았습니다.
polyline
여러 열의 점에서 폴리라인으로 그래프 그리기
rect
직사각형
ellipse
타원형은 타원의 중심과 긴 반경의 짧은 반경을 나타낸다
polygon
다각형, 서로 다른 정점의 좌표를 정한다.

path
경로:move lineto
기능 태그
text
텍스트 그리기

use

하나의 벡터 도형을 다른 위치로 복사하면 내부의 색깔과 다른 속성을 조절할 수 있다.
g
그룹 탭, 그룹의svg를 복사하기 편리합니다.

image
svg에 다른 그림 설정하기;xlink:href 속성 설정 그림의 원시 위치 (src와 다르다)

애니메이션
변환된 애니메이션에 대해 animate Transform을 사용하면 실행할 수 있습니다 (transform:translate(3D)
attributeName 은 변환된 매개변수를 나타냅니다.
from to는 변환 전후의 위치 속성을 나타냅니다.
dur는 변환의 시간을 나타낸다
repeatCount - 변환 애니메이션 이름
type은 변형된 이름rotate translate를 나타냅니다.
3. JS작업svg
svg는 DOM 요소로서 css나 JS를 사용하여 디자인 스타일을 하거나 이벤트를 처리할 수 있습니다.
class 설정 인터페이스의 스타일을 사용하고 id 설정 인터페이스의 애니메이션을 사용합니다.

let svg = document.getElementByID('circle');
svg.addEventListener('click', function(){
  console.log("hi");
  svg.setSttribute('r', 100);
});

Svg가 canvas로 전환

var img = new Image();
var svg = new Blob([svgString], {type: "image/svg+xml;charset=utf-8"});

var DOMURL = self.URL || self.webkitURL || self;
var url = DOMURL.createObjectURL(svg);

img.src = url;

//        

img.onload = function () {
  var canvas = document.getElementById('canvas');
  var ctx = canvas.getContext('2d');
  ctx.drawImage(img, 0, 0);
};