English | 简体中文 | 繁體中文 | Русский язык | Français | Español | Português | Deutsch | 日本語 | 한국어 | Italiano | بالعربية

SVGリファレンスマニュアル

SVG 参考手册收集出SVG常用的元素,及元素的属性使用方法,以及详细的使用参数,使用描述说明等.

SVG 元素

元素说明属性
创建一个SVG元素周围链接xlink:show
xlink:actuate
xlink:href
target
允许对象性文字进行控制,来呈现特殊的字符数据x
y
dx
dy
rotate
glyphRef
format
xlink:href
定义一系列象性符号的替换id
定义一系列常用的育性符的替换id
ディンドムールアンド上时间动态改化属性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'patternUnits="userSpaceOnUse"39;objectBoundingBox"。第2値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="第二输入图像的混合操作"
feColorMatrixSVG滤镜。适用矩阵转换 
feComponentTransferSVG 滤镜。执行数据的 component-wise 重映射 
feCompositeSVG 滤镜 
feConvolveMatrixSVG 滤镜 
feDiffuseLightingSVG 滤镜 
feDisplacementMapSVG 滤镜 
feDistantLightSVG滤镜。定义一个光源 
feFloodSVG滤镜 
feFuncASVG 滤镜。feComponentTransfer 的子元素 
feFuncBSVG 滤镜。feComponentTransfer 的子元素 
feFuncGSVG 滤镜。feComponentTransfer 的子元素 
feFuncRSVG 滤镜。feComponentTransfer 的子元素 
feGaussianBlurSVG滤镜。执行高斯模糊图像 
feImageSVG滤镜。 
feMergeSVG滤镜。建立在彼此顶部图像层 
feMergeNodeSVG 滤镜。feMerge的子元素 
feMorphologySVG 滤镜。 对源图形执行"fattening" 或者 "thinning" 
feOffsetSVG滤镜。相对其当前位置移动图像 
fePointLightSVG滤镜 
feSpecularLightingSVG滤镜 
feSpotLightSVG滤镜 
feTileSVG滤镜 
feTurbulenceSVG滤镜 
filter滤镜效果的容器 
font                定义字体 
font-face描述一种字体的特点 
font-face-format  
font-face-name  
font-face-src  
font-face-uri  
foreignObject  
<g>関連する要素を組み合わせるためのコンテナ要素id="このグループの名前"
fill="このグループの塗りつけ色"
opacity="このグループの不透明度"
+ 表示属性:
All
missing特定の象形文字に対応する図形を定義します 
glyphRef使用する可能性のある象形文字を定義します 
hkern  
<image>画像を定義しますx="画像の左上のx座標"
y="画像の左上のy座標"
width="画像の幅". 必須.
height="画像の高さ". 必須.
xlink:href="画像のパス". 必須.
+ 表示属性:
Color, Graphics, Images, Viewports
<line>線を定義しますx1="直線の始点x座標"
y1="直線の始点y座標"
x2="直線の終点x座標"
y2="直線の終点y座標"
+ 表示属性:
points=折線上の"点"。必須。
<linearGradient>線形グラデーションを定義します。オブジェクトにベクトル線形グラデーションを塗りつけ、水平、垂直、または角グラデーションとして定義できます。id="id 属性はグラデーションにユニークな名前を定義できます。参照は必須"
放射状渐変を定義。放射状渐変は円を39gradientUnits="'または#39;userSpaceOnUse'ビューポートまたはオブジェクトを使用して、相対的な位置ベクトルポイントを決定します。(デフォルトは「39. 視覚フレームやオブジェクトを使用して相対位置のベクトルポイントを決定。デフォルトは&#
gradientTransform="グラデーションに適用される変換"
x1="グラデーション向量xの始点(デフォルト0%)"
y1="グラデーション向量yの始点(デフォルト0%)"
x2="グラデーション向量xの終点。(デフォルト100%)"
y2="グラデーション向量yの終点。(デフォルト0%)"
fy="渐変の焦点。(デフォルト0%)"39spreadMethod="'または#39;pad'または#39;reflect'"
xlink:href="他のグラデーションの参照先であり、その属性値が使用されます defaults and stops included. Recursive"
<marker>マーカーは直線、折れ線、多角形、およびパスの頂点に配置できます。これらの要素はmarker属性の「marker-"start"、"marker-"mid"と"marker-end"、デフォルト設定を継承または「none」に設定または定義されたマーカーのURIを設定します。マーカーを定義する前に参照することはできません。どんな形状も、中に入れることができます。彼らは描画要素を描く際に上に付けることができますmarkerUnits="strokeWidth39patternUnits="userSpaceOnUse"39;userSpaceOnUse"。strokeWidth"の場合、1画分の幅が1単位です。それ以外の場合、マーカースケールは同一視図の単位を使用して参照要素として使用されません(デフォルトは「39;strokeWidth39;(デフォルト:
refx=「マーカー頂点の接続位置(デフォルトは0)」
refy="标记顶点连接的位置(默认为0)"
refy="マーカートップが接続される位置(デフォルト为0)"39orient=""39;auto
;常にマーカーの角度を表示します。 "auto"は、X軸の頂点の正接値を計算する角度を計算します(デフォルト为0)3markerHeight="マーカーの高さ(デフォルト
markerWidth="マーカーの幅(デフォルト3markerHeight="マーカーの高さ(デフォルト
viewBox="各点"で見える"このSVG描画エリア。空格またはカンマで区切られた4個値。(min x, min y, width, height)"
+ )"
All
presentation attributes:<mask>度クリッピングマスクは、不透明度値の組み合わせとクリッピングです。クリッピングと同様に、図形、テキスト、パスを使用してマスクの一部を定義できます。マスクのデフォルト状態は完全に透明で、クリッピング面の反対側です。マスクのグラフィック設定で、マスクの不透明部分を設定します39gradientUnits="'または#39;userSpaceOnUse'maskUnits=""39;userSpaceOnUse'(デフォルト:
;。クリッピングマスクが完全な視窗またはオブジェクトに対して相対的かどうかを設定します(デフォルト:39gradientUnits="'patternUnits="userSpaceOnUse"39;userSpaceOnUse'maskContentUnits="第二のマスクが相対的なオブジェクトの图形位置を使用する百分率"39gradientUnits="'(デフォルト:
;)"-10y="クリッピングマスク(デフォルト値:
x="クリッピングマスク(デフォルト値:-10y="クリッピングマスク(デフォルト値:
%)"120%)"
width="クリッピングマスク(デフォルトは:120%)"
height="クリッピングマスク(デフォルトは:metadata 
メタデータを指定-missing  
glyph  
mpath<path>パスを定義
d="パス指令を定義"
pathLength="存在する場合、パスはこの値に相当する各点のパス長さを計算するためにスケールされます"
+ 表示属性:
points=折線上の"点"。必須。
transform="変換リスト"<pattern>定義座標、表示したいビューとビューの大きさ。それから、パターン形状に追加します。パターンがヒットしたとき、ビューボックスのエッジ(視覚範囲)を繰り返します
id="このパターンを参照するユニークなID。必須。"39patternUnits="userSpaceOnUse"39;または
patternContentUnits=";objectBoundingBox"。第二个値X、Y、width、height は、パターンオブジェクトの枠の一部を使用する値で、単位(%)"39gradientUnits="'または39;userSpaceOnUse'"
patternTransform="全体の表达式に変換を許可"
x="パターンのオフセット量、左上隅から(デフォルトでは0)"
y="パターンのオフセット量、左上隅から(デフォルトでは0)"
width="パターンのタイルの幅(デフォルトでは100%)"
height="パターンのタイルの高さ(デフォルトでは100%)"
viewBox="各点"で見える"このSVG描画エリア。空格またはカンマで区切られた4個値。(min x, min y, width, height)"
xlink:href="別のパターン、その属性値がデフォルト値であり、どのサブクラスでも継承可能。再帰"
 
xlink:href="別のパターン、その属性値がデフォルト値であり、どのサブクラスでも継承可能。再帰"<polygon>多角形を含む少なくとも3つの辺を持つ図形を定義
points="多角形の点。点の数は偶数でなければなりません"。必須。-fill
+ 表示属性:
points=折線上の"点"。必須。
rule="FillStrokeデモ属性の一部"<polyline>直線のみで構成される任意の形状を定義
+ 表示属性:
points=折線上の"点"。必須。
Color, FillStroke, Graphics, Markers<radialGradient>放射状渐変を定義。放射状渐変は円を39gradientUnits="'または#39;userSpaceOnUse'objectBoundingBox'. 視覚フレームやオブジェクトを使用して相対位置のベクトルポイントを決定。デフォルトは&#
;objectBoundingBox)"
gradientTransform="渐変に適用される変換" - 5cx="渐变的中心点(数値または%
0%がデフォルト)"50%)"
cy="渐変の中心点。(デフォルト50%)"
r="渐変の半径。(デフォルト
fx="渐変の焦点。(デフォルト0%)"
fy="渐変の焦点。(デフォルト0%)"39spreadMethod="'または#39;pad'または#39;reflect'"
;repeat&#
xlink:href="別の渐変を参照、その属性値がデフォルト値として使用。再帰"<rect>矩形を定義
x="矩形の左上角のx軸"
y="矩形の左上角のy軸"
rx="x軸の半径(round要素)"
ry="y軸の半径(round要素)"
width="矩形の幅"。必須。
+ 表示属性:
height="矩形の高さ"。必須。
Color, FillStroke, Graphicsscript 
スクリプトコンテナ。(例:ECMAScript)set 
属性値を指定して時間を設定<stop>渐変停止1/offset="停止のオフセット(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;拡大オプションはユーザーがファイルをスライドと拡大するのに許可します(デフォルト拡大)"
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  
titleSVG内の要素のテキストの説明 - グラフィックの一部として表示されません。ユーザーエージェントはツールチップとして表示します 
<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