728x90 300x250 Front-end/svg8 SVG 별모양 그리기 (+ fill-rule 속성) 지난 포스팅에 작성했던 polygon을 이용하면 별모양도 만들 수 있다. 속성중에 다른건 다각형 그리기와 같은데 처음보는 속성이 있다. fill-rule 이 속성은 모양 내부의 채우기 규칙을 결정하는데 사용할 알고리즘을 정의하는 속성이다. fill-rule 속성은 다음의 SVG요소에 사용할 수 있다. fill-rule : nonzero | evenodd | inherit fill-rule 속성값 nonzero, evenodd 2지가 옵션을 살펴보자 어떤 영역이 도형의 내부인지를 판단한다. 여기에 대한 설명을 찾아보았다. nonzero : 해당 점에서 임의의 방향으로 무한대로 선을 그린다음 세그먼트가 광선과 교차하는 위치를 검사하여 모양의 한 점의 "내부"를 결정합니다. 0부터 시작하여 경로 세그먼트가 왼.. 2022. 4. 11. svg 캔버스 비교 SVG(Scalable Vector Graphics) 확장가능한 벡터 그래픽 XML 기반의 2차원 그래픽 아이콘, 이미지, 그래프, 사용자 인터페이스(UI)등 널리 쓰인다. DOM의 일부로서 각 객체별로 HTML엘리먼트가 추가된다. 이미지 크기 상관없이 선명함이 유지되고 복잡하지 않다면 용량도 크지 않다. CSS, 자바스크립트로 조작가능 캔버스 >비트맵 기반 그래픽이미지나 비디오의 픽셀 조작, 게임, 퍼포먼스가 중요한 이미지 조작등에 스임로 표현자바스크립트로 조작가능 (css는 불가능)픽셀 단위의 조작크기가 클수록 성능이 떨어짐 2022. 4. 10. svg 삼각형 그리기 <polygon> polygon의 "poly"는 많다는 것을 뜻하고 "gon"은 각도를 의미 즉 다각형 최소한 세 면을 포함하는 도형을 만들 때 사용한다. 이 polygon을 이용하면 삼각형을 만들 수 있다. points 속성을 이용해서 각 꼭지점의 x,y축의 좌표를 지정해 준다. 2022. 2. 8. svg 선그리기 SVG로 선을 그리기 위해서는 line요소를 사용한다. x1 : 선의 시작점 x축 y1 : 선의 시작점의 y축 x2 : 선의 끝점의 x축 y2 : 선의 끝점의 y축 출처 : https://www.w3schools.com/graphics/svg_line.asp 2022. 2. 4. 이전 1 2 다음 728x90 반응형
