본문으로 건너뛰기
黯羽轻扬매일 조금씩

SVG 기초 지식

무료2017-06-03#Front-End#svg guide#svg basic shapes#d3 path#描边动画#填充动画

SVG 호환성 및 응용 시나리오, SVG常用 요소 사용법 예시

서론

이전에 SVG描辺애니메이션 에 언급한 적이 있으며, 매우 신기한 손글씨 서명 애니메이션 효과를 구현할 수 있습니다. 물론, 이론적으로는 임의의불규칙 패스填充애니메이션을 구현하는 데 사용할 수 있습니다

SVG 를 서포트하는 시나리오에서는, 강력한 SVG描辺애니메이션의 채택을 검토할 수 있으며, 몇 가지 incredible 효과를 구현할 수 있고, 불규칙描辺、填充애니메이션 처리 방면에서疗效確実합니다

一.호환성

SVG(Scalable Vector Graphics) 는 XML 에 기반한 마크업 언어로, 2 차원 벡터 도형을 기술하는 데 사용됩니다

기초 호환성 (Can I use SVG):

데스크톱 [IE9+]
모바일 [Android4.4+] [Android3-4.3] 부분 서포트

SVG 애니메이션 요소 호환성 (Can I use SVG animation):

모바일 [Android3+] iOS[6.1+]

모바일 단말에서는早就에随便에 놀 수 있습니다. 예를 들어 animateMotion 을 사용하여 불규칙 패스를 따른 운동 효과를 구현

二.응용 시나리오

1.icon

iconfont 호환성은确实에 SVG 보다 좋지만, 몇 가지 제한이 있습니다:

  • font 관련 CSS 규칙만 서포트

  • 브라우저의 폰트 최적화 (안티에일리어싱 등) 로 인해, 다른 브라우저 하에서 icon 표시 효과에 차이

  • 폰트 파일에 의존.糟糕한 상황 (다운로드 실패, 또는 사용자가 커스텀 폰트를 선호) 에서는, 테두리가 표시되며, 심지어 emoji 와 충돌

단색 또는 그라데이션만 가능하며, 사이즈 위치는 line-height, vertical-align, letter-spacing 등의 영향을 받아, 실제 사이즈에 편차가 존재 (정렬이 매우 어려움)

SVG icon 의 우세:

  • 벡터 도형, 随便에 스케일링

  • icon 의 다른 부분의 스타일, 描辺색 등을 제어 가능

  • 실제 사이즈가 정확하며, 점유 공간은 SVG 요소 사이즈와 일치

  • 糟糕한 상황에서는, png 를 사용하여 매끄러운 fallback 을 실시

SVG icon 에 관한 보다 많은 정보는, 다음을 참조:

2.애니메이션

SVG 는 animation 과 결합하여 많은 신기한 효과를 구현할 수 있습니다:

  • 불규칙描辺애니메이션 (손글씨 서명)

  • 填充애니메이션 (손그림)

  • 불규칙 패스 애니메이션 (요소를 불규칙 패스를 따라 운동시킴)

인상 깊은 SVG 애니메이션: Animated line drawing in SVG. 보다 많은 SVG 애니메이션 사례는 30 Awesome SVG Animation For Your Inspiration 참조

3.차트

몇 가지 매우 인기 있는 차트 라이브러리는 SVG 를 사용하여 구현되었습니다. 예를 들어 d3, google charts 등

canvas 차트와 비교하여, SVG 차트는 전이 애니메이션 방면에서 선천 우세를 가지며, 매우 예쁜 전이 효과를 구현할 수 있습니다. 예를 들어 D3 Tree

三.SVG 요소

SVG 는 자체적인 요소 정의 (HTML 요소와 유사) 가 있으며, 2 차원 도형을 기술하는 데 사용됩니다. svg 태그로 감싸고, 직접 HTML 에 임베드할 수 있습니다. 예를 들어:

<h3>svg demo</h3>
<svg width="300" height="200" xmlns="http://www.w3.org/2000/svg">
    <rect x="10" y="10" width="30" height="30"></rect>
</svg>
<span>sibling</span>

30x30px 의 검은색 사각형을 표시. svg 요소 사이즈는 100x100px. svg 요소는 기본적으로 display: inline 이므로, "sibling" 텍스트는 검은색 사각형과 병렬

P.S.width, height, x, y 등의 속성은 단위를 붙이지 않는 경우, 기본은 px. em, ex, in, cm, mm, pt, pc, % 등의 단위를 붙일 수도 있음

SVG 요소는 많으며, HTML 요소와의 교집합이 있습니다. SVG element reference 참조

1.형상 요소

기본 형상은 6 종류: <circle>, <ellipse>, <line>, <polygon>, <polyline>, <rect>. 또한 <path> 는 임의 형상을 정의하는 데 사용할 수 있으며, 4 종류의 기본 형상을 포함

rect

<rect x="50" y="10" width="30" height="30" rx="5" ry="5"></rect>

rx, ry 는 모서리를 정의하는 데 사용되며, 각각 네 모서리의 타원이 x 축, y 축 방향의 반지름을 나타냅니다. 물론, 모서리로 원을 그리는 테크닉은 여전히 적용 가능:

<rect x="50" y="10" width="30" height="30" rx="50%" ry="50%"></rect>

x, y 는 왼쪽 위 모서리의 좌표를 나타내며, 좌표계는 canvas 2d 와 같고, 왼쪽 위 모서리가 (0, 0)

circle

<circle cx="150" cy="25" r="15"></circle>

cx, cy 는 원심의 위치를 나타냅니다

ellipse

<ellipse cx="200" cy="30" rx="25" ry="20"></ellipse>

rx, ry 는 각각 x 축 방향 반지름과 y 축 방향 반지름을 나타냅니다

line

<line x1="250" y1="10" x2="300" y2="30" style="stroke: black"></line>

주의, 기본에는 描辺이 없어, 선이 보이지 않습니다. 여기서 stroke 를 사용하여 描辺색을 설정

polygon

<polygon points="60,50 100,70 100,110 60,130 20,110 20,70"></polygon>

한 세트의 점을 지정하여, 닫힌 다각형을 그림

polyline

<polyline points="150,50 190,70 190,110 150,130 110,110 110,70" style="fill: none; stroke: black"></polyline>

다각형과 유사하지만, 꺾은선은 수미를 자동 연결하지 않음

주의, 기본에는 검은색으로 填充되며, 描辺이 없습니다. 위 예의 다각형과 전혀 구별이 없습니다. 여기서 fill 을 사용하여 填充色을 제거하고, stroke 를 사용하여 검은색 描辺을 추가

2.path

通用 형상 정의로, 위에서 언급한 모든 형상을 구현하는 데 사용할 수 있습니다. 예를 들어:

<path d="M 10 10 L 100 10 L 100 80 Z" style="fill: orange; stroke: black; stroke-width: 1"></path>

검은색 描辺을 가지고 주황색으로 填充된 직각삼각형. 속성 d 는 일련의 패스 기술을 나타내며, 몇 가지 지시를 포함:

Moveto      M 펜을 들어서
Lineto      L 직선을
            H 수평 직선을
            V 수직 직선을
Curveto     C 3 차 베지어 곡선을 (2 개의 제어점을 제공할 필요 있음)
            S 이전의 3 차 베지어 곡선과 연결 (2 번째 제어점과 종점만 제공, 1 번째 제어점은 이전 곡선의 2 번째 제어점의 대칭점)
            Q 2 차 베지어 곡선을 (1 개의 제어점을 제공할 필요 있음)
            T 이전의 2 차 베지어 곡선과 연결 (종점만 제공, 제어점은 이전 곡선 제어점의 대칭점)
Arcto       A 타원 곡선을
ClosePath   Z 현재 점과 시작점을 직선으로 연결

주의, Z/z 로 패스를 닫는 것은, 수동으로 L 시작점 과는 다릅니다. 닫기 지시는 선분 끝점을拼接시키기 때문

각 지시의 구체적인 사용법:

M x,y       절대좌표
m dx,dy     상대좌표

L/l         동일
H/h         동일
V/v         동일

C/c c1x,c1y c2x,c2y x,y     제어점 1 제어점 2 종점
S/s cx,cy x,y               제어점 2 종점
Q/q cx,cy x,y               제어점 종점
T/t x,y                     종점

A rx,ry xAxisRotate LargeArcFlag,SweepFlag x,y
  x,y 방향 반지름 x 축과 수평축의 시계방향夹角 [1/0] 대/소 각도 호 [1/0] 시계/반시계방향으로 종점으로 종점

Z/z         파라미터 없음, Z 와 z 에 구별 없음

예를 들어:

<!-- 사각형 -->
<path d="M 10 10 H 70 80 V 70 80 H 10 10 z" style="stroke: black"></path>
<!-- 3 차 베지어 곡선 -->
<path d="M 10 10 C 30 40 90 60 30 100 S 50 50 150 10 S 100 130 100 120" style="fill: none; stroke: black"></path>

P.S.d 속성에 관한 보다 많은 정보는, 다음을 참조:

3.텍스트

<text x="100" y="40" dx="10" dy="10" text-anchor="middle" rotate="10 10" style="font-family: Consola monospace; font-size: 24px; stroke: skyblue; fill: pink;">
    SVG text styling
</text>

x, y, dx, dy 는 위치결정에 사용되며, 전자는 절대 위치결정, 후자는 자신으로부터의 상대 오프셋. text-anchor 는 텍스트를 위치결정하는 데 사용 (x, y 에 대한 좌/우/중앙 정렬)

주의: rotate 속성은 매우신기하며, style="transform: rotate(10deg);" 의 전체 회전과는 달리, rotate 속성은 문자 (glyph) 에 대한 것으로, 한 세트의 값을 전달할 수 있으며, 순서에 따라 각 문자에 각각 작용하므로, 이탤릭체 효과에 유사한 것을 구현하는 데 사용할 수 있습니다

P.S.rotate 속성에 관한 보다 많은 정보는, Chapter 11: Text 참조

4.스타일

CSS 가 서포트하는 스타일 속성 외에, SVG 는 몇 가지 특유의 것을 서포트합니다. 예를 들어 stroke, fill 등. 일반적인 것은 다음과 같음:

fill                填充色, 텍스트 색도 이 속성으로 제어
stroke              描辺색
stroke-width        描辺폭
stroke-linecap      끝점 스타일, 모서리, 직각 등, canvas 와 일치, butt | round | square
stroke-dasharray    점선 스타일

CSS 셀렉터를 통해 SVG 요소에 스타일을 적용할 수도 있습니다. 예를 들어:

<style>.line {stroke: red;}</style>
<svg>
    <line class="line" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

그러나 SVG 내의 style 요소는 HTML 과는 다르며, 위의 방식은 다음과 동등:

<svg>
    <style><![CDATA[
    .newLine {stroke: red;}
    ]]></style>
    <line class="newLine" x1="10" y1="10" x2="100" y2="80"></line>
</svg>

스타일 규칙을 CDATA 로 감싸는 것은 XML 파싱 오류를 피하기 위함:

Note how the CSS style sheet is placed within a CDATA construct (i.e., ). Placing internal CSS style sheets within CDATA blocks is sometimes necessary since CSS style sheets can include characters, such as ">", which conflict with XML parsers. Even if a given style sheet does not use characters that conflict with XML parsing, it is highly recommended that internal style sheets be placed inside CDATA blocks.

(Styling-SVG 1.1(Second Edition) 에서 인용)

5.marker

marker 마크는 도형 요소에 부착될 수 있습니다. 예를 들어 marker 를 사용하여 화살표 추가:

<defs>
    <marker id="Triangle" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
        <path d="M 0 0 L 10 5 L 0 10 z" />
    </marker>
</defs>

<path d="M 10 10 C 50 80 40 20 120 50" fill="none" stroke="black" stroke-width="1" marker-end="url(#Triangle)"></path>

defs 를 통해 재사용 가능한 요소를 정의하고, id 를 통해 이전에 정의한 marker 요소를 참조. url(#Triangle) 은 Functional IRI reference 라고 함

여기서 화살표를 정의하고, 패스 곡선의 종점에 추가. 선택 가능한 위치는:

marker-start    시작점
marker-mid      각 중간점
marker-end      종점

marker 각 속성의 의미는 다음과 같음:

viewBox             좌표계 영역
refX/Y              참조점, 그릴 때 해당 점이 끝점과 중합
markerUnits         좌표계 단위 정의 userSpaceOnUse 현재의 좌표계 단위 | strokeWidth 선폭 (기본)
markerWidth/Height  마크의 폭높이, 기본값은 3
orient              그릴 방향, 값은 auto 또는 각도값

기본 markerUnits="strokeWidth" 는 도형 선폭에 기반하여 marker 사이즈를 자동 적응. markerUnits="userSpaceOnUse" 의 경우, marker 단위를 현재의 좌표계 단위로 지정하며, 도형 선폭에 대해 상대 조정하지 않음

기본 orient="auto" 는朝向각도를 자동 계산. 곡선 위의 화살표는 기울기 방향을 가리키며, 매우정교 자연

P.S.marker 에 관한 보다 많은 정보는, 11 Painting: Filling, Stroking and Marker Symbols 참조

6.필터

filter 를 적용하여 렌더링 효과를 변경하고, 표시 효과를 더 좋게 합니다. 사용 방식은 marker 와 유사:

<defs>
    <filter id="blur">
        <feGaussianBlur in="SourceGraphic" stdDeviation="5"/>
    </filter>
</defs>

<path d="M 10 20 C 50 80 40 20 120 60" fill="none" stroke="black" stroke-width="1" filter="url(#blur)"></path>

feGaussianBlur 요소를 통해 가우스 흐림 필터 (모유리 효과) 를 정의하고, 흐림 정도 파라미터 stdDeviation 를 설정. in 은 필터를 적용할 오브젝트를 설정하는 데 사용. 여기서 SourceGraphic 은 원도를 나타내며, alpha 채널 또는 배경 이미지 (필터를 적용한 전체 영역 스냅샷) 에만 적용할 수도 있음

더욱이 그림자, 조명, 색 등의 필터를 서포트. 상세 정보는 SVG element reference 참조

7.그라데이션

선형 그라데이션과 방사성 그라데이션을 서포트. 사용 방식은 marker 와 유사. 예를 들어:

<defs>
    <linearGradient id="linear" x1="0%" y1="0%" x2="0%" y2="100%">
        <stop offset="0%" stop-color="#000"/>
        <stop offset="100%" stop-color="#fff"/>
    </linearGradient>
    <radialGradient id="radial">
        <stop offset="10%" stop-color="#eee"/>
        <stop offset="95%" stop-color="#ccc"/>
    </radialGradient>
</defs>

<rect x="0" y="0" width="100%" height="50%" fill="url(#linear)"></rect>
<rect x="0" y="50%" width="100%" height="50%" fill="url(#radial)"></rect>

각각 순검정에서 순백으로의 수직 선형 그라데이션, 중심이 밝고 주변이 점차 어두운 방사성 그라데이션을 정의

四.온라인 Demo

위에서 언급한 모든 예시: http://www.ayqy.net/temp/svg/svg.html

댓글

아직 댓글이 없습니다

댓글 작성