ELEMENTS

Elements

SVG 요소

계층 탐색

  • Animation

    애니메이션 요소
    • <animate>

      지정된 시간에 따라 요소의 속성에 애니메이션을 적용하는 방법을 제공한다.
    • <animateMotion>

      요소가 모션 경로를 따라 이동하는 애니메이션을 정의한다.
    • <animateTransform>

      요소에 대한 변형(변환, 크기, 회전, 기울기) 애니메이션을 설정한다.
    • <mpath>

      외부 &lt;path&gt; 요소를 동작 경로의 정의로 참조하는 기능을 제공한다.
  • Container

    컨테이너 노드
    • <foreignObject>

      다른 네임스페이스의 요소를 포함하는 컨테이너를 만든다. 주로 HTML 요소를 삽입하는 용도로 사용된다.
    • <g>

      관련된 그래픽 요소들을 그룹화한다.
    • <svg>

      새 SVG 요소를 생성하는 새 좌표계와 뷰포트를 정의한 가장 바깥쪽 요소로서 여러 Shape을 하위 요소로 가지고 있다.
  • Declaration

    • <defs>

      재사용이 가능한 그래픽 개체를 정의한다.
  • Definition

    정의 관련 노드
    • <clipPath>

      clip-path 속성에 사용할 클리핑 경로를 지정한다.
    • <marker>

      &lt;path&gt;, &lt;line&gt;, &lt;polyline&gt; 또는 &lt;polygon&gt; 요소에 화살촉이나 다중 마커를 그리는 데 사용할 그래픽을 정의한다.
    • <mask>

      현재 개체를 배경에 합성하기 위한 알파 마스크를 정의한다.
    • <radialGradient>

      원형 그라데이션을 정의한다.
  • Filter

    효과를 적용하기 위한 요소
    • <feBlend>

      두 개의 SVG 요소가 겹쳐 있는 경우 혼합되는 방식을 정의한다.
    • <feColorMatrix>

      변환 매트릭스 데이터를 기반으로 색상을 변경한다. 모든 픽셀의 색상 값 [R,G,B,A]는 새로운 색상 [R`,G`,B`,A`]를 생성하기 위해서 5x5 색상 매트릭스로 행렬을 곱한 것이다.
    • <feComponententTransfer>

      각 픽셀에 대한 데이터의 색상 구성 요소 방식 재매핑을 실행한다. 밝기, 대비 조정, 색상 균형 또는 임계값과 같은 작업을 허용한다.
    • <feComposite>

      Porter-Duff 합성 작업(over, in, atop, out, xor, lighter 또는 산술) 중 하나를 사용하여 이미지 공간에서 두개의 입력 이미지를 픽셀 단위로 결합한다.
    • <feConvolveMatrix>

      매트릭스 컨볼루션 필터 효과를 적용한다. 컨볼루션 효과는 입력 이미지의 픽셀을 인접 픽셀과 결합하여 결과 이미지를 생성한다.
    • <feDiffuseLighting>

      알파 채널을 범프 맵으로 사용하여 이미지를 비춘다. RGBA 불투명 이미지인 결과 이미지는 조명 색상, 조명 위치 및 입력 범프 맵의 표면 형상에 따라 달라진다.
    • <feDisplacementMap>

      in2의 이미지에서 픽셀 값을 사용하여 in의 이미지를 공간적으로 변위시킨다.
    • <feFlood>

      플러드 색상 및 플러드 불투명도로 정의된 색상 및 불투명도로 필터 하위 영역을 채운다.
    • <feFuncA>

      상위 &lt;feComponentTransfer&gt; 요소의 입력 그래픽에 대한 알파 구성 요소에 대한 전달 함수를 정의한다.
    • <feFuncB>

      상위 &lt;feComponentTransfer&gt; 요소의 입력 그래픽에 대한 파란색 구성 요소에 대한 전달 함수를 정의한다.
    • <feFuncG>

      상위 〈feComponentTransfer〉 요소의 입력 그래픽에 대한 녹색 구성 요소에 대한 전달 함수를 정의한다.
    • <feFuncR>

      상위 〈feComponentTransfer〉 요소의 입력 그래픽에 대한 빨간색 구성 요소에 대한 전달 함수를 정의한다.
    • <feGaussianBlur>

      벨 커브를 정의하는 stdDeviation에 지정된 값만큼 입력 이미지를 흐리게 한다.
    • <feImage>

      외부 소스에서 이미지 데이터를 가져오고 픽셀 데이터를 출력으로 제공한다. 다시 말해 외부 이미지 소스가 SVG 이미지인 경우 픽셀화 된다.
    • <feMerge>

      필터 효과를 순차적이 아닌 동시에 적용할 수 있다.
    • <feMergeNode>

      상위 &lt;feMerge &gt;에서 처리할 다른 필터의 결과를 가져온다.
    • <feMorphology>

      입력 이미지를 침식하거나 팽창시킨다. 대상을 뚱뚱하게 하거나 날씬하게 하는 효과가 있다. 
    • <feOffset>

      입력 이미지를 오프셋한다. 전체적으로 입력 이미지는 dx 또는 dy 속성에 지정된 값으로 오프셋된다.
  • Fonts

    폰트 처리 노드
  • Graphics

    그래픽 요소를 생성하는 요소
  • Shape

    그래픽 요소
    • <circle>

      중심점과 반지름을 기준으로 원을 생성한다.
    • <ellipse>

      x, y 방향의 반지름을 기반으로 타원을 생성한다.
    • <rect>

      사각형의 기본 도형을 생성한다. 또한 모서리가 둥근 사각형을 생성할 수도 있다.
  • TextContext

    텍스트 컨텍스트 요소
  • Uncategorized

    분류되지 않은 노드들
    • <a>

      다른 웹페이지, 파일, 같은 페이지 내의 특정 위치, 이메일 주소 또는 기타 URL에 대한 하이퍼링크를 생성한다. HTML &lt;a&gt; 요소와 유사하다.
    • <desc>

      모든 SVG 컨테이너 요소 또는 그래픽 요소에 대한 액세스 가능한 긴 텍스트 설명을 제공한다.
    • <metadata>

      SVG 콘텐츠에 메타데이터를 추가한다.