最新のWeb開発のチュートリアル
 

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="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> 一緒に特定のブレンドモードに応じて2つのオブジェクトを構成します 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