Latest web development tutorials

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

SVG要素

要素 説明 プロパティ
<A> SVG要素の周囲にリンクを作成します。 xlink:ショー
xlink:作動
xlink:hrefの
ターゲット
<AltGlyph> テキストコントロールの目的は、特殊文字データをレンダリングすることができます X
Y
DX
DY
回転させます
glyphRef
フォーマット
xlink:hrefの
<AltGlyphDef> 交換する一連のシンボルとして定義され イド
<AltGlyphItem> 候補者のような一連のシンボルの定義を置き換え イド
<アニメーション> 時間とともに動的にプロパティを変更 attributeNameに= "target属性名」
= "開始値"から
= "終了値」に
DUR = "時間"
repeatCountに=「タイムアニメーションが発生します。」
<AnimateColor> 時間の経過とともに、色変換の定義 =「相対オフセット値」によります
= "開始値"から
= "終了値」に
<AnimateMotion> ように要素は、モーションパスに沿って移動します calcModeは= "アニメーションの補間モードは、「離散」、「リニア」、「ペース」、「スプライン」することができます」
パス=「移動経路」
キーポイント= "現時点のオブジェクトの移動経路に沿っては、はるかに移動させなければなりません。」
回転= "回転変換を適用します。」
xlink:hrefが= "URIは、モーションパスを定義する<パス>要素を参照します。」
<AnimateTransform> アニメーションのターゲット要素は、アニメーションコントロールパン、ズーム、回転、または傾斜を作り、transformプロパティを =「相対オフセット値」によります
= "開始値"から
= "終了値」に
タイプ= "値が時間とともに変化する「翻訳」することができ、変換タイプ、「スケール」、「回転」、「skewX値 '、' skewY '"
<サークル> 円の定義 CX = "x軸は、円の座標。」
CY = "y軸の円の座標。」
R = "円の半径。"必須。

+表示属性:色、FillStroke、グラフィックス
<クリップ経路> クリッピングパス部分の外側に位置するオブジェクトを非表示にするために使用。 描画と描画ダイクリッピングパスと呼ばれるものを定義していないもの クリップパス= "クリッピングパスが交差するパスをクリッピングの参照と参照。"
clipPathUnits = "UserSpaceOnUseで 'または' ObjectBoundingBoxで」。 マスクユニットのごく一部(デフォルト: "UserSpaceOnUseで")を使用して、オブジェクトの第二の値学童ボーダー、 "
<カラープロファイル> 説明指定されたカラープロファイル(CSSスタイルファイルを使用する場合) ローカル= "カラープロファイルが保存されているローカルで一意のID"
名前= ""
レンダリング・インテント= "オ​​ート|知覚|相対比色|彩度|絶対測色」
xlink:hrefの= "ICCプロファイルリソースURI」
<カーソル> プラットフォームに依存しないカスタムカーソルを定義します。 X = "カーソルのx軸左上隅(デフォルトは0です)。"
Y = "カーソルの左上隅のy軸(デフォルトは0です)。"
xlink:hrefが= "カーソル画像のURIを使用し
<DEFS> コンテナ要素の参照
<DESC> 純粋なSVGのテキスト記述内の要素 - グラフィックのないよう一部が表示されます。 ユーザエージェントは、ツールチップとして表示されることがあります
<楕円> 楕円の定義 CX = "楕円形のx軸座標」
CY = "楕円形のy軸座標」
RX = "楕円半径のx軸に沿っ。" 必須。
RY = "y軸の半径に沿って長方形の。」 必須。

+表示属性:色、FillStroke、グラフィックス
<FeBlend> 2つのオブジェクトの合成に異なる描画モードを使用して、 モード= "画像描画モード:ノーマル|掛け|スクリーン|暗く|明るく」
= "指定されたフィルタ生の入力として識別:SourceGraphicと| SourceAlpha |背景画像| BackgroundAlpha | FillPaint | StrokePaint | <フィルタ・プリミティブリファレンス>"に
IN2 =「第二の入力画像混合操作。」
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は直線終点のY座標です。」

+表示のプロパティ:
色、FillStroke、グラフィックス、マーカー
<てLinearGradient> 線形グラデーションを定義します。 直線勾配を使用して、ベクトルオブジェクトを入力し、水平、垂直または角度の勾配として定義することができます。 ID = "id属性は、勾配の一意の名前を定義することができる。参照がなければなりません」
gradientUnits = " 'UserSpaceOnUseで'または 'ObjectBoundingBoxで」。相対位置ベクトル点を決定するために、ビューボックスまたはオブジェクトを使用します。(デフォルトの' ObjectBoundingBoxでの)"
gradientTransform =は「グラデーションを変更するには適用され "
X1 =「×勾配ベクトルの始点(デフォルト0%)」
Y1 = "yの勾配ベクトルの始点(デフォルト0%)」
X2 = "勾配ベクトルxの終わり。(デフォルト100%)」
Y2 = "勾配ベクトルyの終わり。(デフォルト0%)」
spreadMethod = " 'パッド'または '反映'または '繰り返し'"
xlink:hrefの= "属性値がデフォルトとストップが再帰を含めとして使用されている別の勾配への参照。"
<マーカー> タグは、頂点線、ポリライン、多角形、およびパス上に配置することができます。 これらの要素は、デフォルトを継承、maekerプロパティ」maekerスタート」、「maeker・ミッド」と「maekerエンド」を使用することができ、またはURI「なし」または定義されたタグに設定することができます。 それはURIで参照することができるようにするには、タグを定義する必要があります。 形状のいずれかの種類は、あなたが内側にタグを置くことができます。 彼らはトップにそれらを添付する要素を描画するとき markerUnits = "strokeWidth 'または' UserSpaceOnUseで」。 strokeWidthは「その後、ユニットの使用は、ストロークの幅と同じである。そうでなければ、基準要素( 'strokeWidth'デフォルト)としてユニットの同じタグスケールのビューを使用していない」場合
REFX = "場所マーカー頂点の接続(デフォルトは0)。」
REFY = "場所マーカー頂点の接続(デフォルトは0)。」
オリエント= " 'auto'で常に角度マークが表示されます。「自動」は、頂点の接線のX軸、そのような角度で計算されます(デフォルトは0)
markerWidth = "幅とマーク(デフォルト3)。」
markerHeight = "高さとマーク(デフォルト3)。」
見たビューボックス= "ポイント" "このSVG描画領域。スペースまたはカンマで区切られた4つの値。(X、分Y、幅、高さ分)」

+プレゼンテーション属性:
すべて
<マスク> シールドは、非切断および透明度の値の組み合わせです。 トリミングと同様に、一部のグラフィックス、テキストまたはパス定義されたマスクを使用することができます。 マスクのデフォルトの状態ではそれがクリッピング平面の反対で、完全に透明です。 マスクパターンの設定マスクの不透明部分で maskUnitsは= "。" UserSpaceOnUseで 'または' ObjectBoundingBoxで「クリッピング面は比較的無傷のウィンドウまたはオブジェクト( 'ObjectBoundingBoxでのデフォルト)であるかどうかを設定しました」
maskContentUnits = "割合" UserSpaceOnUseで 'または' ObjectBoundingBoxで '(デフォルト:' UserSpaceOnUseで ')を用いて、第2のマスクパターンの相対的なオブジェクトの位置」
X = "クリッピングプレーンマスク(デフォルト:-10%)。」
Y = "クリッピングプレーンマスク(デフォルト:-10%)。」
幅= "クリッピングプレーンマスク(デフォルト:120%)。」
高さ= "クリッピングプレーンマスク(デフォルト:120%)。」
メタデータ 指定されたメタデータ
不足しているグリフ
MPATH
<パス> パスを定義します。 D = "パス定義コマンド」
経路長は= "がある場合、パスは、このパスの長さにポイント相当する値を算出するためにスケーリングされます"
変換=「変換一覧」

+表示のプロパティ:
色、FillStroke、グラフィックス、マーカー
<パターン> DETは、サイズはあなたが表示され、ビューを表示したいです。 次に、あなたのモード形状に追加します。 繰り返されるこのパターンは、ボックスビューのエッジをヒット(可視範囲) ID = "このパターンを参照するために使用される固有のID。」が必要です。
patternUnits = "UserSpaceOnUseで 'または' ObjectBoundingBoxで」。 オブジェクトの一部を用いて第2の値X、Y、幅、高さ、フレームモード、単位(%)。 「
patternContentUnits = " 'UserSpaceOnUseで'または 'ObjectBoundingBoxで'"
patternTransform = "式全体が変換することができます」
X = "オフセットモード、左上隅から(デフォルトは0です)。"
yは= "左上隅から、モードをオフセット(デフォルトは0)。」
幅= "パターンタイル幅(デフォルトは100%です)。"
高さ= "パターンタイルの高さは(デフォルトは100%です)。"
見たビューボックス= "ポイント" "このSVG描画領域。スペースまたはカンマで区切られた4つの値。(X、分Y、幅、高さ分)」
xlink:hrefの= "もう一つのモデルは、プロパティの値はデフォルトであり、任意のサブクラスでは、再帰を継承することができます。」
<ポリゴン> 定義図面は、少なくとも3つの側面が含まれています ポイントは= "ポリゴンのポイント。ポイントの合計数は偶数でなければなりません。」 必須。
フィル・ルールを= "セクションFillStrokeプレゼンテーション属性」

+表示のプロパティ:
色、FillStroke、グラフィックス、マーカー
<ポリライン> 直線のみ任意の形状を定義します。 ポリライン点= "ポイント"。 必須。

+表示のプロパティ:
色、FillStroke、グラフィックス、マーカー
<RadialGradient> 放射性漸進的の定義。 放射状のグラデーションの円を作成します。 gradientUnits = " 'UserSpaceOnUseで'または 'ObjectBoundingBoxで」。ベクトルポイントの相対的な位置を決定するために、ビューボックスまたはオブジェクトを使用します。(デフォルトは' ObjectBoundingBoxです)」
gradientTransform =は「勾配を変換するために適用されます」
CX = "グラデーションの中心点(数または% - 50%がデフォルトです)。"
CY = "グラデーションの中心点。(デフォルト50%)。」
R = "緩やかな半径(デフォルト50%)。」
FX = "グラデーションの焦点。(デフォルト0%)」
FY = "グラデーションの焦点。(デフォルト0%)」
spreadMethod = " 'パッド'または '反映'または '繰り返し'"
xlink:hrefの= "プロパティ値デフォルト再帰などの別の勾配への参照。"
<のRect> 矩形を定義します X = "矩形のx軸左上隅。」
Y = "矩形の左上隅のy軸」。
RX = "半径(円形要素)はx軸」を
RY = "y軸の半径(ラウンドエレメント)」
幅= "矩形の幅。」 必須。
高さ= "矩形の高さ。」 必須。

+表示のプロパティ:
色、FillStroke、グラフィックス
スクリプト スクリプトのコンテナ。 (このようなECMAScriptのような)
セット 指定された時間のためのプロパティ値を設定します
<ストップ> グラデーション停止 「オフセット(0-1 / 0%〜100%)を停止します。 "=オフセットリファレンス
停止色= "色をこの停止」
停止-不透明度を= "(0-1)の不透明度を停止します。」
スタイル スタイルシートは、SVGコンテンツ内に直接埋め込むことができます
<SVG> SVG文書片を作成します。 X = "左上隅に埋め込まれた(デフォルトは0です)。"
Y = "左上隅に埋め込まれた(デフォルトは0)。」
幅= "幅SVG断片(デフォルトは100%です)。"
高さ= "高さSVG断片(デフォルトは100%です)。"
見たビューボックス= "ポイント" "このSVG描画領域に。スペースまたはカンマで区切られた4つの値。(X、分Y、幅、高さ分)」
preserveAspectRatioは=分」、「ミッド」または「最大」。(デフォルトなし) "" 'どれも'または任意の 'xVALYVAL」9の組み合わせは、VALはありません」
zoomAndPanは= " '拡大'または 'disable'.Magnifyオプションは、ユーザーがファイルをパンとズームすることができます(デフォルトと拡大)」
XML = "最も外側の<のsvg>要素とSVGの名前空間をインストールするには、その必要性:のxmlns =" http://www.w3.org/2000/svg "のxmlns:XLINK ="のhttp://www.w3。 ORG / 1999 /のxlink "のxml:スペース="保存 ""

+表示のプロパティ:
すべて
スイッチ
シンボル
<テキスト> テキストを定義します X = "Xのリスト - .. n番目のx軸の最初のn文字の位置でテキスト内のシャフトの位置余分な文字が背後に存在する場合、それらは0に配置され、最後の文字位置がデフォルトになった後に排気。」
Y = "リストのY軸位置。(xに参照)0がデフォルトです。」
DX = "絶対位置(xを参照)内の文字のリストの長さに相対的な描かれた最後のグリフを移動します」
DY = "(xに参照)絶対位置の文字のリストの長さに相対的な描かれた最後のグリフを移動します」
= "最初のn文字のn番目の回転の回転リストを。追加の文字が最終スピン値を与えていない」回転
数TextLength = "SVG Viewerは、テキスト/フォントの間隔を表示したり、ターゲットのテキスト(デフォルト:テキストの通常の長さ)の長さを調整しようとします。」
lengthAdjustは= "あなたはテキストをレンダリングするように調整長さを指定しようとすると、視聴者に伝えます。これらの2つの値は、「間隔」と「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