Latest web development tutorials

SVG 참조 설명서

SVG 요소

요소 설명 재산
<A> SVG 요소 주위에 링크 만들기 인 XLink : 쇼
인 XLink :를 작동
인 XLink : HREF
목표
<AltGlyph> 허용 텍스트의 목적은 특수 문자 데이터를 렌더링하도록 제어 엑스
Y
DX
DY
회전
glyphRef
체재
인 XLink : HREF
<AltGlyphDef> 이것은 대체하는 일련의 심볼로 정의 신분증
<AltGlyphItem> 후보와 같은 기호 일련의 정의를 교체 신분증
<애니메이션> 동적으로 시간이 지남에 따라 속성을 변경 여기서 attributeName = "대상의 속성 이름"
=에서 "시작 값"
=에 "최종 값"
지속 = "시간"
반복 횟수 = "시간 애니메이션이 발생합니다."
<AnimateColor> 색 변환의 시간이 지남에 따라 정의 = "상대 오프셋 값"으로
=에서 "시작 값"
=에 "최종 값"
<AnimateMotion> 있도록 소자 움직임 경로를 따라 이동 calcMode = "애니메이션 보간 모드 '불연속', '직선'이 될 수 있으며, '걸어', '스플라인'"
경로 = "이동 경로"
키포인트 = "현재의 오브젝트의 이동 경로를 따라 멀리 이동한다."
회전 = "회전 변환을 적용합니다."
인 XLink는 : HREF는 = "URI는 모션 경로를 정의하는 <경로> 요소를 참조합니다."
<AnimateTransform> 애니메이션 대상 요소는 애니메이션 제어 팬, 줌, 회전, 또는 경사를 만들고, 속성을 변환 = "상대 오프셋 값"으로
=에서 "시작 값"
=에 "최종 값"
유형 = "값이 변경 시간에 변환 유형은 '회전', 'skewX', 'skewY', '규모'를 '번역'이 될 수있다"
<원> 원의 정의 CX = "x 축은 원의 좌표입니다."
CY = "y를 축 원의 좌표입니다."
R = "원의 반지름."필요합니다.

+ 표시 속성 : 색상, FillStroke, 그래픽
<ClipPath> 클리핑 패스 부분 외부에있는 개체를 숨길 수 있습니다. 드로잉과 드로잉 다이 클리핑 패스 소위 정의하지 않는 것 클립 경로 = "참조 및 참조는 클리핑 패스 경로가 교차 클리핑."
clipPathUnits = "UserSpaceOnUse이면 '또는'ObjectBoundingBox이면". 마스크 단위의 작은 부분 (기본 "UserSpaceOnUse이면")를 이용하여 물체의 초 값 childern 테두리 "
<색상 프로파일> 설명 특정 컬러 프로파일 (CSS 스타일 파일 사용시) 지역 = "색상 프로파일을 저장할 로컬 고유 ID"
이름 = ""
렌더링-의도 = "자동차 | 지각 | 상대 비색 | 포화 | 절대 비색"
은 xlink : HREF = "ICC 프로파일 자원 URI"
<커서> 플랫폼 독립적 인 사용자 정의 커서를 정의 X = "커서의 x 축 왼쪽 위 모서리 (기본값은 0입니다)."
Y = "커서의 왼쪽 위 모서리의 y 축 (기본값은 0입니다)."
인 XLink는 : HREF = "커서 이미지 URI를 사용하여
<응급 바이러스 정의> 컨테이너 요소 참조
<제품 설명> 순수 SVG 텍스트 설명의 요소 - 그래픽의하지 부분은 표시합니다. 사용자 에이전트는 툴팁으로 표시 할 수 있습니다
<타원> 타원의 정의 CX = "타원형의 x 축 좌표"
CY는 = "타원형의 y 축 좌표"
RX = "타원 반경의 x 축을 따라." 필요합니다.
RY = "Y 축 반지름을 따라 타원형." 필요합니다.

+ 표시 속성 : 색상, FillStroke, 그래픽
<FeBlend> 두 개의 오브젝트의 합성에 다양한 블렌딩 모드를 사용 모드 = "이미지 혼합 모드 : 일반 | 곱 | 화면 | 어두워 | 밝게"
= "주어진 필터 원료 입력으로 확인 : SourceGraphic | SourceAlpha | backgroundImage의 | BackgroundAlpha | FillPaint | StrokePaint | <필터 기본 참조>"에
IN2 = "제 2 입력 이미지를 혼합한다."
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 필터. 소스 그래픽 "쪄"또는 "세 선화"의 구현
feOffset SVG 필터. 동화상의 현재 위치를 기준으로
fePointLight SVG 필터
feSpecularLighting SVG 필터
feSpotLight SVG 필터
feTile SVG 필터
feTurbulence SVG 필터
필터 컨테이너 필터 효과
글꼴 사용자 정의 글꼴
글꼴 얼굴 글꼴의 특성을 설명
글꼴 얼굴 포맷
글꼴 - 얼굴 - 이름
글꼴 얼굴 SRC
글꼴 얼굴-URI
foreignObject
<G> 관련 요소의 조합에 대한 컨테이너 요소 ID = "그룹의 이름입니다."
"그룹의 색상을 입력합니다."= 작성
불투명도 = "그룹 불투명"

+ 표시 속성 :
모든
글리프 주어진 상형 문자 사용자 정의 그래픽
glyphRef 그림 문자의 정의가 사용될 수있다
hkern
<이미지> 사용자 지정 이미지 X = "x 축은 이미지의 왼쪽 상단의 좌표입니다."
Y = "y 축은 이미지의 왼쪽 상단의 좌표입니다."
폭 = "이미지의 폭입니다."해야합니다.
높이 = "이미지의 높이입니다."해야합니다.
인 XLink :. HREF = "이미지 경로"해야합니다.

+ 표시 속성 :
색상, 그래픽, 이미지, 뷰포트
<선> 선을 정의 X1은 = "직선의 시작점의 x 좌표."
Y1 = "직선의 시작점의 y 좌표."
X2는 = "직선 종점의 X 좌표입니다."
Y2는 = "y는 직선 종점의 좌표."

+ 표시 속성 :
색상, FillStroke, 그래픽, 마커
<이 LinearGradient> 선형 그라데이션을 정의합니다. 선형 구배를 사용하여 벡터 객체를 작성하고, 수평, 수직 또는 경사 각도로 정의 될 수있다. ID = "id 속성은 그라데이션의 고유 한 이름을 정의 할 수 있습니다. 참조해야"
gradientUnits = " 'UserSpaceOnUse이면'또는 'ObjectBoundingBox이면'. 상대 위치 벡터 포인트를 결정하기 위해보기 상자 또는 개체를 사용합니다. (기본 'ObjectBoundingBox이면)을"
gradientTransform는 = "그라데이션을 변경 적용"
X1 = "X 그라데이션 벡터의 시작점 (기본값 0 %)"
Y1 = "Y 그라데이션 벡터의 시작점 (기본값 0 %)"
X2 = "그라데이션 벡터 x의 끝. (기본 100 %)"
Y2 = "그라데이션 벡터 Y의 끝. (기본값 0 %)"
스프레드 방법 = " '패드'또는 '반영'또는 '반복'"
인 XLink : HREF = "속성 값을 기본값과 정지가 순환을 포함로 사용되는 또 다른 그라데이션을 참조."
<마커> 태그는 정점 라인, 다중 선, 다각형, 및 경로에 배치 될 수있다. 이러한 요소는 기본 상속, maeker 속성 "maeker 시작", "maeker - 중간"와 "maeker 엔드"를 사용하거나 URI "none"또는 정의 된 태그로 설정 될 수있다. 그것이 URI 참조 할 수 전에 태그를 정의해야합니다. 모양의 모든 종류의, 당신은 내부에 태그를 넣을 수 있습니다. 그들이 요소를 그릴 때 상단에 첨부하기 markerUnits = "strokeWidth를 '또는'UserSpaceOnUse이면". strokeWidth를하면 "다음 유닛의 사용은 스트로크의 폭과 동일하다. 그렇지 않으면, 기준 소자로서 ( 'strokeWidth를'디폴트)는 장치 같은 태그 - 스케일 볼을 사용하지 않는"
refx = "장소 마커 정점 연결 (기본값은 0)."
refy = "장소 마커 정점 연결 (기본값은 0)."
동양 = " '자동'항상 각 마크 표시."자동 "이 각도로 계산됩니다 이러한 정점의 접선의 X 축이 있음 (기본값은 0)
markerWidth = "폭 (기본값 3)를 표시했습니다."
markerHeight = "높이 (기본값 3)를 표시했습니다."
뷰 박스 = "이 SVG 그리기 영역. 공백이나 쉼표.로 구분 된 4 개의 값 (분 X, 최소 Y, 폭, 높이)"보이는 "점"

+ 프리젠 테이션 속성 :
모든
<마스크> 차폐 비 절단 및 투명도 값의 조합이다. 자르기와 마찬가지로, 당신은 어떤 그래픽, 텍스트 또는 경로 정의 마스크를 사용할 수 있습니다. 마스크의 기본 상태 즉, 클리핑 평면의 대향 완전히 투명하다. 마스크의 불투명 한 부분에 패턴 마스크를 초기 설정 maskUnits = ". ( 'ObjectBoundingBox이면'기본) 'UserSpaceOnUse이면'또는 'ObjectBoundingBox이면'는 비행기를 클리핑 상대적으로 그대로 창 또는 개체인지 여부 설정"
"비율 'UserSpaceOnUse이면'또는 'ObjectBoundingBox이면'( 'UserSpaceOnUse이면'기본)를 사용하여 제 2 마스크 패턴 상대 개체 위치"maskContentUnits =
X = "클리핑 평면 마스크 (기본값 : 10 %)."
Y = "클리핑 평면 마스크 (기본값 : 10 %)."
폭 = "클리핑 평면 마스크 (기본 : 120 %)."
높이 = "클리핑 평면 마스크 (기본 : 120 %)."
메타 데이터 지정된 메타 데이터
누락 된-글리프
있는 mpath
<경로> 경로를 정의 D = "경로 정의 명령"
경로 길이는 = "가있는 경우, 경로는이 경로의 길이에 점 동등한 값을 계산하기 위해 조정한다"
변환 = "변환 목록"

+ 표시 속성 :
색상, FillStroke, 그래픽, 마커
<패턴> DET, 크기는 디스플레이와 전망을 보려는. 그런 다음 모드 형상에 추가합니다. 반복이 패턴은 뷰 박스의 에지를 히트 (가시 범위) ID = "이 패턴을 참조하는 데 사용되는 고유 ID입니다."이 필요합니다.
patternUnits = "UserSpaceOnUse이면 '또는'ObjectBoundingBox이면". 두번째 값 X, Y, 폭, 물체의 작은 부분을 이용하여 가로 프레임 모드에서, 유닛 (%). "
patternContentUnits = " 'UserSpaceOnUse이면'또는 'ObjectBoundingBox이면'"
patternTransform = "전체 식을 변환 할 수 있습니다"
X = "오프셋 모드, 왼쪽 위 모서리에서 (기본값은 0입니다)."
y는 = "왼쪽 상단 모서리에서, 모드 오프셋 (기본값은 0입니다)."
폭 = "패턴 타일 폭 (기본값은 100 %입니다)."
높이 = "패턴 타일 높이 (기본값은 100 %입니다)."
뷰 박스 = "이 SVG 그리기 영역. 공백이나 쉼표.로 구분 된 4 개의 값 (분 X, 최소 Y, 폭, 높이)"보이는 "점"
인 XLink : HREF = "또 다른 모델은 속성 값은 기본이며 모든 서브 클래스는 재귀를 상속 할 수 있습니다."
<다각형> 정의 도면은 적어도 삼면을 포함 포인트 = "다각형의 점. 점의 총 개수는 짝수이어야한다." 필요합니다.
채우기 규칙 = "섹션 FillStroke 프리젠 테이션 속성"

+ 표시 속성 :
색상, FillStroke, 그래픽, 마커
<폴리> 만 직선 어떤 모양을 정의 폴리 라인의 포인트는 = "점." 필요합니다.

+ 표시 속성 :
색상, FillStroke, 그래픽, 마커
<RadialGradient는> 방사성 점진적의 정의. 방사형 그라디언트 원 만들기 gradientUnits = " 'UserSpaceOnUse이면'또는 'ObjectBoundingBox이면'. 벡터 점의 상대적 위치를 결정하기 위해보기 상자 또는 개체를 사용합니다. (기본값은 'ObjectBoundingBox이면이다)"
gradientTransform는 = "그라디언트를 변환 적용"
CX = "그라디언트의 중심점은 (숫자 또는 %는 - 50 %가 기본값입니다)."
CY = "그라디언트의 중심점. (기본값 50 %)."
R = "점진적으로 반경. (기본값 50 %)."
FX = "그래디언트의 초점. (기본값 0 %)"
FY = "그래디언트의 초점. (기본값 0 %)"
스프레드 방법 = " '패드'또는 '반영'또는 '반복'"
인 XLink : HREF = "속성 값 기본 재귀와 같은 다른 그라데이션을 참조."
<사각형> 사각형을 정의 X = "사각형의 x 축 왼쪽 상단 모서리에."
y를 = "사각형의 왼쪽 위 모서리의 y 축."
RX = "반경 (원형 요소) × 축."
공예 = "y 축 반경 (원형 요소)"
폭 = "사각형의 폭입니다." 필요합니다.
높이 = "사각형의 높이입니다." 필요합니다.

+ 표시 속성 :
색상, FillStroke, 그래픽
스크립트 스크립트 용기. (이러한 인 ECMAScript 등)
세트 지정된 시간에 대한 속성 값을 설정
<정지> 그라데이션 중지 "오프셋 (0-1 / 0 % ~ 100 %)을 중지합니다."= 오프셋 (offset) 참조
중지 색을 = "색상이 정지"
"(0-1)의 불투명도를 중지합니다."- 불투명도를 중지 =
스타일 스타일 시트는 SVG 콘텐츠 내부에 직접 삽입 할 수 있습니다
<SVG> SVG 문서 조각을 만들기 X = "왼쪽 상단 모서리에 포함 (기본값은 0입니다)."
Y = "왼쪽 상단 모서리에 포함 (기본값은 0)."
폭 = "폭 SVG 조각 (기본값은 100 %입니다)."
높이 = "높이 SVG 조각 (기본값은 100 %입니다)."
본 뷰 박스 = "포인트" "이 SVG 그리기 영역에. 공백이나 쉼표로 구분 된 4 개의 값. (최소 X, 최소 Y, 폭, 높이)"
preserveAspectRatio는 = 분 ","중간 "또는"최대 ". (기본값 없음)" " '없음'또는 'xVALYVAL'구 조합, VAL은 없다"
zoomAndPan은 = " ''가 확대 '또는 disable'.Magnify 옵션은 사용자가 파일 (기본 확대)를 이동하고 확대 할 수 있습니다"
XML = "바깥 쪽 <SVG> 요소 및 SVG 네임 스페이스를 설치하는 그것의 필요 :의 xmlns ="http://www.w3.org/2000/svg "XMLNS을 : 인 XLink ="HTTP : //www.w3. 조직 / 1999 / 인 XLink "XML : 공간 ="보존 ""

+ 표시 속성 :
모든
스위치
상징
<텍스트> 텍스트를 정의 X = "X 목록 - 추가 문자가 뒤에있는 경우 .. 제 n X 축의 제 n 문자의 위치에서 텍스트의 샤프트의 위치들은 0 배치 마지막 문자 위치 뒤에 배출이 기본이다."
Y = "목록의 Y 축 위치. (X 참조) 0이 기본값입니다."
DX = "절대 위치의 문자 (X 참조)의리스트의 길이에 상대적으로 그린 ​​마지막 그림 문자를 이동"
"(X 참조) 절대 위치의 문자리스트의 길이에 상대적으로 그린 ​​마지막 그림 문자를 이동"= DY
"처음 n 문자의 n 번째 회전의 회전 목록을. 추가 문자가 마지막 스핀 값을 제공하지 않았다"회전 =
textLength = "SVG 뷰어는 텍스트 / 글꼴 사이의 간격을 표시하거나 대상 텍스트 (기본값 : 텍스트의 정상적인 길이)의 길이를 조절하려고합니다."
lengthAdjust는 = "텍스트를 렌더링 조정 길이를 지정하려는 경우, 뷰어를 알려줍니다.이 두 값은 '공간'과 'spacingAndGlyphs'입니다"

+ 표시 속성 :
색상, FillStroke, 그래픽, FontSpecification, TextContentElements
textPath
표제 순수 SVG 텍스트 설명의 요소 - 그래픽의하지 부분은 표시합니다. 사용자 에이전트는 툴팁으로 표시 할 수 있습니다
<TREF> 모든 SVG 문서 <텍스트> 요소 및 재사용을 참조하십시오 같은 <TEXT> 요소
<Tspan> 요소의 <텍스트>에 해당이 있지만 텍스트 자체와 내부 마크 내에서 중첩 될 수 있습니다 의 <텍스트> 요소와 동일
또한 + :
인 XLink : HREF = "는 <TEXT> 요소 참조"
<사용> 은 <G>, <SVG> 또는 다른 속성을 사용하여 URI 참조는 고유 ID 반복 그래픽 요소가 있습니다. 원래 요소를 복사하므로 원본 파일의 존재는 단지 참조입니다. 원래 모든 복사본의 변화에 ​​영향을 미칩니다. X = "x 축 클론 좌상 요소"
y를 = "왼쪽 상단 y 축 요소 클론"
폭 = "소자 폭 복제"
높이 = "높이 소자 복제"
인 XLink : HREF = "요소를 복제 URI 참조"

+ 표시 속성 :
모든
전망
vkern