SVG 요소
| 요소 | 기술 | 속성 |
|---|---|---|
| <a> | SVG 요소 주위에 링크를 생성 | xlink:show xlink:actuate xlink:href target |
| <altGlyph> | 특정 문자 데이터를 렌더링하는 데 사용되는 글리프 통해 제어를 제공한다 | x y dx dy rotate glyphRef format xlink:href |
| <altGlyphDef> | 상형 문자에 대한 대체 세트를 정의합니다 | id |
| <altGlyphItem> | 글리프 대체의 후보 집합을 정의 | id |
| <animate> | 요소의 특성이 경시 변화 방법을 정의 | attributeName="the name of the target attribute" by="a relative offset value" from="the starting value" to="the ending value" dur="the duration" repeatCount="the number of time the animation will take place" |
| <animateMotion> | 모션 경로를 따라 이동하는 참조 요소가 발생한다 | calcMode="the interpolation mode for the animation. Can be 'discrete',
'linear', 'paced', 'spline'" path="the motion path" keyPoints="how far along the motion path the object shall move at the moment in time" rotate="applies a rotation transformation" xlink:href="an URI reference to the <path> element which defines the motion path" |
| <animateTransform> | 이에 애니메이션 변환, 스케일링, 회전을 제어 할 수 있도록 그리고 / 또는 비틀림 대상 요소 변환 특성을 애니메이션화 | by="a relative offset value" from="the starting value" to="the ending value" type="the type of transformation which is to have its values change over time. Can be 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 원을 정의합니다 | cx="the x-axis center of the circle" cy="the y-axis center of the circle" r="The circle's radius". Required. + presentation attributes: Color, FillStroke, Graphics |
| <clipPath> | 클리핑는 일반적으로 그려 질 것입니다 무슨 숨기기에 관한 것입니다. 무엇 무엇 그려지지 않습니다 클리핑 패스라고 정의 스텐실 | clip-path="the referenced clipping path is intersected with the
referencing clipping path" clipPathUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of children a fraction of the object bounding box which uses the mask (default: 'userSpaceOnUse') " |
| <color-profile> | 색상 프로파일 설명을 지정합니다 (문서가 CSS를 사용하여 스타일 경우) | local="the unique ID for a locally stored color profile" name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="the URI of an ICC profile resource" |
| <cursor> | 플랫폼 독립적 인 사용자 정의 커서를 정의 | x="the x-axis top-left corner of the cursor (default is 0) " y="the y-axis top-left corner of the cursor (default is 0) " xlink:href="the URI of the image to use as the cursor |
| <defs> | 참조 요소의 컨테이너 | |
| <desc> | SVG 컨테이너 요소 또는 그래픽 요소에 대한 텍스트 전용 설명 (사용자 에이전트는 툴팁으로 텍스트를 표시 할 수 있습니다) | |
| <ellipse> | 타원을 정의 | cx="the x-axis center of the ellipse" cy="the y-axis center of the ellipse" rx="the length of the ellipse's radius along the x-axis". Required. ry="the length of the ellipse's radius along the y-axis". Required. + presentation attributes: Color, FillStroke, Graphics |
| <feBlend> | 서로 일정한 블렌딩 모드에 따라 두 개의 개체를 구성하는 | mode="the image blending modes: normal|multiply|screen|darken|lighten" in="identifies input for the given filter primitive: SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="the second input image to the blending operation" |
| feColorMatrix | SVG 필터. 행렬 변환을 적용 | |
| feComponentTransfer | SVG 필터. 데이터의 구성 요소 현명한 매핑을 수행합니다 | |
| feComposite | SVG 필터. | |
| feConvolveMatrix | SVG 필터. | |
| feDiffuseLighting | SVG 필터. | |
| feDisplacementMap | SVG 필터. | |
| feDistantLight | SVG 필터. 광원을 정의 | |
| feFlood | SVG 필터. | |
| feFuncA | SVG 필터. feComponentTransfer에 하위 요소 | |
| feFuncB | SVG 필터. feComponentTransfer에 하위 요소 | |
| feFuncG | SVG 필터. feComponentTransfer에 하위 요소 | |
| feFuncR | SVG 필터. feComponentTransfer에 하위 요소 | |
| feGaussianBlur | SVG 필터. 이미지에 가우시안 블러를 수행합니다 | |
| feImage | SVG 필터. | |
| feMerge | SVG 필터. 서로의 위에 화상 층을 작성 | |
| feMergeNode | SVG 필터. feMerge에 하위 요소 | |
| feMorphology | SVG 필터. 행하는 "fattening" 또는 "thinning" 소스 그래픽에 | |
| feOffset | SVG 필터. 현재의 위치에 이미지 상대적인 이동 | |
| fePointLight | SVG 필터. | |
| feSpecularLighting | SVG 필터. | |
| feSpotLight | SVG 필터. | |
| feTile | SVG 필터. | |
| feTurbulence | SVG 필터. | |
| filter | 필터 효과에 대한 컨테이너 | |
| font | 글꼴을 정의합니다 | |
| font-face | 글꼴의 특성을 설명합니다 | |
| font-face-format | ||
| font-face-name | ||
| font-face-src | ||
| font-face-uri | ||
| foreignObject | ||
| <g> | 그룹화 요소에 사용 | id="the name of the group" fill="the fill color for the group" opacity="the opacity for the group" + presentation attributes: All |
| glyph | 주어진 그래프에 대한 그래픽을 정의합니다 | |
| glyphRef | 사용 가능한 문자 모양을 정의 | |
| hkern | ||
| <image> | 이미지를 정의 | x="the x-axis top-left corner of the image" y="the y-axis top-left corner of the image" width="the width of the image". Required. height="the height of the image". Required. xlink:href="the path to the image". Required. + presentation attributes: Color, Graphics, Images, Viewports |
| <line> | 선을 정의합니다 | x1="the x start point of the line" y1="the y start point of the line" x2="the x end point of the line" y2="the y end point of the line" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <linearGradient> | 선형 그라데이션을 정의합니다. 선형 그라디언트 벡터를 사용하여 객체를 작성하고, 수평, 수직 또는 경사 각도로 정의 될 수있다. | id="the unique id used to reference this pattern. Required to reference
it" gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box or object to determine relative position of vector points. (Default 'objectBoundingBox') " gradientTransform="the transformation to apply to the gradient" x1="the x start point of the gradient vector (number or % - 0% is default) " y1="the y start point of the gradient vector. (0% default) " x2="the x end point of the gradient vector. (100% default) " y2="the y end point of the gradient vector. (0% default) " spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <marker> | 마커는 선, 폴리 라인, 다각형 및 경로의 정점에 배치 될 수있다. 사용 할 수 있습니다 이러한 요소 marker 속성 "marker-start" , "marker-mid" 와'기본적으로 상속 또는 설정할 수 있습니다 '없음'또는 정의 된 마커의 URI"마커 엔드 ". 당신은 URI를 통해 참조 할 수 있습니다 전에 먼저 마커를 정의해야합니다. 형상의 모든 종류의 표지 안에 넣을 수있다. 이들은 그들이 부착되어있는 요소 위에 그려진 | markerUnits="'strokeWidth' or 'userSpaceOnUse'. If 'strokeWidth' is used
then one unit equals one stroke width. Otherwise, the marker does not scale
and uses the the same view units as the referencing element (default 'strokeWidth') " refx="the position where the marker connects with the vertex (default 0) " refy="the position where the marker connects with the vertex (default 0) " orient="'auto' or an angle to always show the marker at. 'auto' will compute an angle that makes the x-axis a tangent of the vertex (default 0) " markerWidth="the width of the marker (default 3) " markerHeight="the height of the marker (default 3) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " + presentation attributes: All |
| <mask> | 마스킹 불투명도 값 클리핑의 조합이다. 당신이 모양을 사용할 수 있습니다 클리핑처럼, 텍스트 또는 경로는 마스크의 섹션을 정의 할 수 있습니다. 마스크의 기본 상태는 비행기를 클리핑의 반대 인 완전히 투명합니다. 마스크의 그래픽은 마스크의 불투명 한 부분이 얼마나 설정 | maskUnits="'userSpaceOnUse' or 'objectBoundingBox'. Set whether the
clipping plane is relative the full view port or object (default: 'objectBoundingBox') " maskContentUnits="Use the second with percentages to make mask graphic positions relative the object. 'userSpaceOnUse' or 'objectBoundingBox' (default: 'userSpaceOnUse') " x="the clipping plane of the mask (default: -10%) " y="the clipping plane of the mask (default: -10%) " width="the clipping plane of the mask (default: 120%) " height="the clipping plane of the mask (default: 120%) " |
| metadata | 메타 데이터를 지정합니다 | |
| missing-glyph | ||
| mpath | ||
| <path> | 경로를 정의합니다 | d="a set of commands which define the path" pathLength="If present, the path will be scaled so that the computed path length of the points equals this value" transform="a list of transformations" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <pattern> | 당신이보기를 표시 할 좌표와 뷰의 크기를 정의합니다. 그런 다음 당신은 당신의 패턴으로 형상을 추가합니다. 보기 상자의 가장자리 때 패턴은 반복 (viewing area) 타격 | id="the unique id used to reference this pattern." Required. patternUnits="'userSpaceOnUse' or 'objectBoundingBox'. The second value makes units of x, y, width, height a fraction (or %) of the object bounding box which uses the pattern." patternContentUnits="'userSpaceOnUse' or 'objectBoundingBox'" patternTransform="allows the whole pattern to be transformed" x="pattern's offset from the top-left corner (default 0) " y="pattern's offset from the top-left corner. (default 0) " width="the width of the pattern tile (default 100%) " height="the height of the pattern tile (default 100%) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " xlink:href="reference to another pattern whose attribute values are used as defaults and any children are inherited. Recursive" |
| <polygon> | 적어도 세 가지 측면을 포함하는 그래픽을 정의 | points="the points of the polygon. The total number of points must be
even". Required. fill-rule="part of the FillStroke presentation attributes" + presentation attributes: Color, FillStroke, Graphics, Markers |
| <polyline> | 만 직선으로 구성되어 어떤 모양을 정의 | points="the points on the polyline". Required. + presentation attributes: Color, FillStroke, Graphics, Markers |
| <radialGradient> | 방사형 그라디언트를 정의합니다. 방사형 그래디언트는 원을 복용하고 원활하게 외부 반경에 포커스 포인트에서 그라데이션 중지 사이의 값을 변경하여 생성된다. | gradientUnits="'userSpaceOnUse' or 'objectBoundingBox'. Use the view box
or object to determine relative position of vector points. (Default 'objectBoundingBox') " gradientTransform="the transformation to apply to the gradient" cx="the center point of the gradient (number or % - 50% is default) " cy="the center point of the gradient. (50% default) " r="the radius of the gradient. (50% default) " fx="the focus point of the gradient. (0% default) " fy="The focus point of the gradient. (0% default) " spreadMethod="'pad' or 'reflect' or 'repeat'" xlink:href="Reference to another gradient whose attribute values are used as defaults and stops included. Recursive" |
| <rect> | 사각형을 정의합니다 | x="the x-axis top-left corner of the rectangle" y="the y-axis top-left corner of the rectangle" rx="the x-axis radius (to round the element) " ry="the y-axis radius (to round the element) " width="the width of the rectangle". Required. height="the height of the rectangle" Required. + presentation attributes: Color, FillStroke, Graphics |
| script | 스크립트 컨테이너 (eg, ECMAScript) | |
| set | 지정된 시간 동안 속성치를 설정 | |
| <stop> | 그라데이션의 정지 | offset="the offset for this stop (0 to 1/0% to 100%) ". Required. stop-color="the color of this stop" stop-opacity="the opacity of this stop (0 to 1) " |
| style | 스타일 시트는 SVG 콘텐츠 내에 직접 삽입 할 수 있습니다 | |
| <svg> | SVG 문서 조각을 만듭니다 | x="top left corner when embedded (default 0) " y="top left corner when embedded (default 0) " width="the width of the svg fragment (default 100%) " height="the height of the svg fragment (default 100%) " viewBox="the points "seen" in this SVG drawing area. 4 values separated by white space or commas. (min x, min y, width, height) " preserveAspectRatio="'none' or any of the 9 combinations of 'xVALYVAL' where VAL is 'min', 'mid' or 'max'. (default xMidYMid) " zoomAndPan="'magnify' or 'disable'. Magnify option allows users to pan and zoom your file (default magnify) " xml="outermost <svg> element needs to setup SVG and its namespace: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + presentation attributes: All |
| switch | ||
| symbol | ||
| <text> | 텍스트를 정의 | x="a list of x-axis positions. The nth x-axis position is given to the
nth character in the text. If there are additional characters after the
positions run out they are placed after the last character. 0 is default" y="a list of y-axis positions. (see x) . 0 is default" dx="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) " dy="a list of lengths which moves the characters relative to the absolute position of the last glyph drawn. (see x) " rotate="a list of rotations. The nth rotation is performed on the nth character. Additional characters are NOT given the last rotation value" textLength="a target length for the text that the SVG viewer will attempt to display the text between by adjusting the spacing and/or the glyphs. (default: The text's normal length) " lengthAdjust="tells the viewer what to adjust to try to accomplish rendering the text if the length is specified. The two values are 'spacing' and 'spacingAndGlyphs'" + presentation attributes: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | SVG 요소에 대한 텍스트 전용 설명 - 그래픽의 일부로 표시되지 않습니다. 사용자 에이전트는 툴팁으로 텍스트를 표시 할 수 있습니다 | |
| <tref> | 참조하는 <text> SVG 문서의 요소와 재사용 | Identical to the <text> element |
| <tspan> | 받는 동일한 <text> 요소 만 텍스트 태그 내부에 자체 내부에 중첩 될 수 있습니다 | Identical to the <text> element + in addition: xlink:href="Reference to a <text> element" |
| <use> | 은 <g> 참조하기위한 URI를 사용하여 <svg> 고유 ID 속성으로 또는 다른 그래픽 요소와 그것을 복제합니다. 복사 그렇게 만 원래 문서에 존재하는 원본에 대한 참조 만입니다. 원본을 변경하면 모든 사본에 영향을 미칩니다. | x="the x-axis top-left corner of the cloned element" y="the y-axis top-left corner of the cloned element" width="the width of the cloned element" height="the height of the cloned element" xlink:href="a URI reference to the cloned element" + presentation attributes: All |
| view | ||
| vkern |