English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية
SVG 참조 매뉴얼은 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="목표 속성 이름" from="시작 값" to="끝 값" dur="지속 시간" repeatCount="애니메이션 시간이 발생" |
| <animateColor> | 시간에 따라 색상 변환 정의 | by="상대적 이동 값" from="시작 값" to="끝 값" |
| <animateMotion> | 요소가 행동 경로를 따라 이동하게 만듭니다 | calcMode="애니메이션의 인터폴레이션 모드.可以是'discrete',
'linear', 'paced', 'spline'" path="이동 경로" keyPoints="이동 경로의 현재 시간에 따라 객체가 이동해야 할 거리" rotate="적용 회전 변환" xlink:href="<path> 요소를 참조하는 URI, 이는 이동 경로를 정의합니다" |
| <animateTransform> | 이전 목표 요소 변환 속성을 애니메이션하여 이동, 확대, 회전 또는 기울기 제어 | by="상대적 이동 값" from="시작 값" to="끝 값" type="시간에 따라 변하는 값을 변환하는 타입.可以是 'translate', 'scale', 'rotate', 'skewX', 'skewY'" |
| <circle> | 원 정의 | cx="원의 x축 좌표" cy="원의 y축 좌표" r="원의 半径". 필수. + 显现属性：颜色，FillStroke，图形 |
| <clipPath> | 剪切 패스 외에 있는 객체 부분을 숨기기 위해 사용됩니다. 그려지는 것과 그려지지 않는 것을 정의하는 도구를 클립 패스라고 합니다 | clip-path="참조 클립 패스와 참조 클립 패스 교차" clipPathUnits="userSpaceOnUse' 또는'objectBoundingBox". 두 번째 값 childern 객체의 경계선을 사용하는 마스크의 일부 단위(기본: "userSpaceOnUse")" |
| <color-profile> | 색상 설정 파일 설명 지정(CSS 스타일 파일 사용 시) | local="로컬 스토리지 색상 설정 파일 고유 ID name="" rendering-intent="auto|perceptual|relative-colorimetric|saturation|absolute-colorimetric" xlink:href="ICC 설정 파일 자원 URI |
| <cursor> | 플랫폼에 독립된 사용자 정의 커서 정의 | x="x축의 왼쪽 상단 커서(기본值为0) y="y축의 왼쪽 상단 커서(기본值为0) xlink:href="커서 이미지 URI 사용 |
| <defs> | 참조 요소 컨테이너 | |
| <desc> | SVG 내 요소의 순수 텍스트 설명 - 그래픽의 일부로 표시되지 않습니다. 사용자代理가 툴팁으로 표시합니다 | |
| <ellipse> | 定义一个椭圆 | cx="椭圆x轴坐标" cy="椭圆y轴坐标" rx="沿x轴椭圆形的 半径"。必需。 ry="沿y轴长椭圆形的半径"。必需。 + 显现属性：颜色，FillStroke，图形 |
| <feBlend> | 使用不同的混合模式把两个对象合成在一起 | mode="图像混合模式：normal|multiply|screen|darken|lighten" in="标识为给定的滤镜原始输入：SourceGraphic | SourceAlpha | BackgroundImage | BackgroundAlpha | FillPaint | StrokePaint | <filter-primitive-reference>" in2="第二输入图像的混合操作" |
| feColorMatrix | SVG滤镜。适用矩阵转换 | |
| feComponentTransfer | SVG 滤镜。执行数据的 component-wise 重映射 | |
| 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="그룹의 이름" fill="그룹 채우기 색상" opacity="그룹 불투명도" + 표현 속성: All |
| glyph | 지정된 시각적 기호에 대한 그래픽을 정의합니다 | |
| glyphRef | 사용할 수 있는 시각적 기호를 정의합니다 | |
| hkern | ||
| <image> | 이미지를 정의합니다 | x="이미지의 왼쪽 상단의 x 축 좌표" y="이미지의 왼쪽 상단의 y 축 좌표" width="이미지의 너비". 반드시. height="이미지의 높이". 반드시. xlink:href="이미지의 경로". 반드시. + 표현 속성: Color, Graphics, Images, Viewports |
| <line> | 선을 정의합니다 | x1="직선 시작점 x 좌표" y1="직선 시작점 y 좌표" x2="직선 종점 x 좌표" y2="직선 종점 y 좌표" + 표현 속성: Color, FillStroke, Graphics, Markers |
| <linearGradient> | 선형 그래디언트를 정의합니다. 객체를 벡터 선형 그래디언트로 채우고 수평, 수직 또는 각도 그래디언트로 정의할 수 있습니다. | id="id 속성은 그래디언트에 독특한 이름을 정의할 수 있습니다. 참조는" gradientUnits="#39;userSpaceOnUse#39; 또는 #39;objectBoundingBox#39;. 뷰 بو克斯 또는 객체를 사용하여 상대적인 위치 벡터 포인트를 결정합니다. (기본적으로'objectBoundingBox" gradientTransform="그래디언트에 적용되는 변환" x1="그래디언트 벡터 x 시작점 (기본적으로 0%)" y1="그래디언트 벡터 y 시작점 (기본적으로 0%)" x2="그래디언트 벡터 x의 종점. (기본적으로100％）" y2="그래디언트 벡터 y의 종점. (기본적으로 0%)" spreadMethod="#39;pad#39; 또는 #39;reflect#39; 또는 #39;repeat#39;" xlink:href="다른 그래디언트에 대한 참조를 지정합니다. 이 그래디언트의 속성 값이 사용됩니다 as defaults and stops included. Recursive" |
| <marker> | 표지를 직선, 곡선, 다각형 및 경로의 정점에 넣을 수 있습니다. 이 요소들은 marker属性的"marker-"start", "marker-"mid"과 "marker-end"을 继承하여 기본적으로 설정할 수 있거나, 정의된 표지의 URI를 설정합니다. 표지를 먼저 정의해야 하며, 그 URI를 통해 참조할 수 있습니다. 어떤 형상이든, 표지를 그 안에 넣을 수 있습니다. 그들은 그림을 그리는 동안 그들을 상단에 부착합니다 | markerUnits="strokeWidth' 또는'userSpaceOnUse". strokeWidth"라면 단일 단위가 선의 두께와 같습니다. 그렇지 않으면, 표지尺度는 같은 뷰 단위를 참조 요소로 사용하지 않습니다. 기본적으로'strokeWidth') refx="표지점 연결 위치를 지정합니다. 기본적으로 0입니다" refy="마커 정점 연결 위치(기본值为0"} orient="'auto' 항상 마커의 각도를 표시합니다. "auto"은 X축의 한 정점의 터셀의 각도를 계산하여(기본值为0) markerWidth="마커의 너비(기본3)" markerHeight="마커의 높이(기본3)" viewBox="각 점"에서 "이 SVG 그래픽 영역을 볼 수 있습니다. 공백이나 쉼표로 구분된4각 값。(min x, min y, width, height)" + 표현 속성: All |
| <mask> | 도 마스크는 불투명도 값을 결합하고 잘라냅니다. 잘라내기와 마찬가지로, 그래픽, 텍스트 또는 경로를 사용하여 마스크의 일부를 정의할 수 있습니다. 마스크의 기본 상태는 완전 투명한 것으로, 즉 잘라내기 평면의 반대쪽입니다. 마스크의 그래픽 설정에서 마스크의 불투명 부분을 설정합니다 | maskUnits="'userSpaceOnUse#39; 또는 #39;objectBoundingBox#39;. 마스크가 전체 창 또는 대상에 대한 비례적인지 설정합니다(기본값:'objectBoundingBox#39;) maskContentUnits="두 번째 마스크가 대상 객체의 그래픽 위치에 비례합니다.百分比值'userSpaceOnUse#39; 또는'objectBoundingBox#39;(기본값:'userSpaceOnUse#39;) x="크로스 세션 마스크(기본값은:-10％) y="크로스 세션 마스크(기본값은:-10％) width="크로스 세션 마스크(기본값은:120％）" height="크로스 세션 마스크(기본값은:120％）" |
| metadata | 메타데이터를 지정합니다 | |
| missing-glyph | ||
| mpath | ||
| <path> | 경로를 정의합니다 | d="경로 지시" pathLength="존재하면, 경로는 이 값을 기준으로 축소되어 각 점이 이 값에 해당하는 경로 길이를 계산합니다" transform=" 변환 목록" + 표현 속성: Color, FillStroke, Graphics, Markers |
| <pattern> | 좌표를 정의하고, 원하는 뷰를 표시하고 뷰의 크기를 정의합니다. 그런 다음 모델 형상에 추가합니다. 모델이 히트할 때, 뷰 박스의 경계선(可视范围)을 반복합니다 | id="이 모델을 참조하는 독특한 ID. 필수입니다." patternUnits="userSpaceOnUse' 또는'objectBoundingBox". 두 번째 값 X, Y, width, height은 모델 객체의 경계선의 일부를 사용하는 값으로, 단위(%)입니다" patternContentUnits="'userSpaceOnUse#39; 또는 'objectBoundingBox#39;" patternTransform="전체 표현식을 변환할 수 있습니다" x="모델의 기준점, 왼쪽 상단에서 시작(기본值为0" y="모델의 기준점, 왼쪽 상단에서 시작(기본值为0" width="모델 텐셀링의 너비(기본值为100％）" height="모델 텐셀링의 높이(기본值为100％）" viewBox="각 점"에서 "이 SVG 그래픽 영역을 볼 수 있습니다. 공백이나 쉼표로 구분된4각 값。(min x, min y, width, height)" xlink:href="또 다른 패턴, 그 속성 값이 기본 값이며 자식 클래스가 상속할 수 있는 모든 것. 재귀적" |
| <polygon> | 최소 3쪽을 가진 그래픽을 포함하는 다각형을 정의합니다 | points="다각형의 점. 점의 총 수는 짝수여야 합니다". 필수입니다. fill-rule="FillStroke 데모 속성의 일부" + 표현 속성: Color, FillStroke, Graphics, Markers |
| <polyline> | 직선으로만 구성된 임의의 형상을 정의합니다 | points=선상의 "점". 필수입니다. + 표현 속성: Color, FillStroke, Graphics, Markers |
| <radialGradient> | 放射性 그레이딩을 정의합니다.放射性 그레이딩은 원을 생성합니다 | gradientUnits="#39;userSpaceOnUse#39; 또는 #39;objectBoundingBox#39. 뷰박스나 객체를 사용하여 상대적인 위치의 벡터 포인트를 결정합니다. (기본적으로39;objectBoundingBox" gradientTransform="그레이딩에 적용되는 변환" cx="그레이딩의 중심점(숫자나％) - 50％은 기본값입니다) cy="그레이딩의 중심점. (기본적으로50％）" r="그레이딩의 반지름. (기본적으로50％）" fx="그레이딩의 초점. (기본적으로 0％) fy="그레이딩의 초점. (기본적으로 0％) spreadMethod="#39;pad#39; 또는 #39;reflect#39; 또는 #39;repeat#39;" xlink:href="다른 그레이딩을 참조하여, 그 속성 값이 기본 값으로 사용됨. 재귀적" |
| <rect> | 사각형을 정의합니다 | x="사각형의 왼쪽 상단의 x축" y="사각형의 왼쪽 상단의 y축" rx="x축의 반지름(rounder 요소) ry="y축의 반지름(rounder 요소) width="사각형의 너비". 필수입니다. height="사각형의 높이". 필수입니다. + 표현 속성: Color, FillStroke, Graphics |
| script | 스크립트 컨테이너(예: ECMAScript) | |
| set | 속성 값을 지정하여 시간을 설정합니다 | |
| <stop> | 그레이딩 중단 | offset="이 중간 중단의 오프셋(0에서1/0％까지100％)을 참조하세요. 0％에서 stop-color="이 stop의 색상" stop-opacity="이 Stop의 불투명도 (0에서1)" |
| style | 스타일 시트를 SVG 내용 내부에 직접 삽입할 수 있습니다 | |
| <svg> | SVG 문서 부분을 생성합니다 | x="왼쪽 상단에 삽입됨(기본적으로 0) y="왼쪽 상단에 삽입됨(기본적으로 0) width="SVG 부분의 너비(기본적으로)100％）" height="SVG 단편의 높이. 기본적으로}}100％）" viewBox="점"seen"SVG 그래픽 영역. 공백이나 쉼표로 구분된4값. (min x, min y, width, height) preserveAspectRatio="#39;none#39; 또는 어떤 #39;xVALYVAL#39;의9조합, VAL은 "min", "mid", 또는 "max"입니다. (기본적으로 none) zoomAndPan="#39;magnify#39; 또는 #39;disable#39;.Magnify 옵션은 사용자가 파일을 이동하고 확대할 수 있게 합니다 (기본 Magnify )" xml="가장 외부 <svg> 요소는 SVG와 그 이름 공간을 설치해야 합니다: xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve"" + 표현 속성: All |
| switch | ||
| symbol | ||
| <text> | 텍스트를 정의합니다 | x="목록의 X -축의 위치. 텍스트에서 n번째 문자는 n번째 x축 위치에 있습니다. 추가된 문자가 있으면, 마지막 문자 이후의 위치에 배치됩니다. 0은 기본" y="목록의 Y축 위치. (x를 참조) 0은 기본" dx="문자의 길이 목록에서 마지막으로 그려진 표시기의 상대적 절대 위치로 이동합니다. (x를 참조) dy="문자의 길이 목록에서 마지막으로 그려진 표시기의 상대적 절대 위치로 이동합니다. (x를 참조) rotate="회전된 목록. n번째 회전은 n번째 문자입니다. 추가된 문자는 마지막 문자 이후의 회전 값을 제공하지 않습니다" textLength="SVG查看器将尝试显示文本之间的间距/또는 글리프 조정의 텍스트 목표 길이입니다. (기본: 일반 텍스트의 길이)" lengthAdjust="查看기에 지정된 길이가 있으면 텍스트를 표시하기 위해 조정을 시도합니다. 이 두 가지 값은 #39;spacing#39; 및 #39;spacingAndGlyphs#39;" + 표현 속성: Color, FillStroke, Graphics, FontSpecification, TextContentElements |
| textPath | ||
| title | SVG 내 요소의 순수 텍스트 설명 - 그래픽의 일부로 표시되지 않습니다. 사용자代理가 툴팁으로 표시합니다 | |
| <tref> | SVG 문서 내의 모든<text>요소를 참조하고 재사용 | 동일한<TEXT>요소 |
| <tspan> | 요소는 <text>와 동일하지만 내부에 텍스트 태그 및 내부 자체를 중첩할 수 있습니다. | 동일한 <text> 요소와 + 추가로: xlink:href="<TEXT> 요소 참조" |
| <use> | URI 참조를 사용하여 <G>, <svg> 또는 독립적인 ID 속성을 가진 반복적인 그래픽 요소를 참조합니다. 복사된 것은 원본 요소이며, 파일에 원본이 하나만 존재하며 참조로 사용됩니다. 원본의 모든 변경 사항은 모든 복사본에 영향을 미칩니다. | x="클론 요소의 왼쪽 상단의 x축" y="클론 요소의 왼쪽 상단의 y축" width="클론 요소의 너비" height="클론 요소의 높이" xlink:href="URI 참조 클론 요소" + 표현 속성: All |
| view | ||
| vkern |