SVGの記述方法まとめ

2016.09.04

SVGの記述方法を調べてみたのでまとめておきます。

基本的な記述

SVGで200px×100pxの四角形を描画してみます。

HTML

<svg>
	<rect width="200" height="100" fill="#999"/>
</svg>

SVGの基本的な記述のデモページ1
svgタグの中に四角形を描画するrectタグを記述して、widthとheightでサイズ指定、fillで塗りつぶしの色を指定しています。

次に、上記の四角形を画面幅に引き延ばしてみます。

HTML

<svg width="100%" viewBox="0 0 200 100">
	<rect width="200" height="100" fill="#999"/>
</svg>

SVGの基本的な記述のデモページ2
rectタグはそのままで、svgタグにwidthとviewBoxを指定しました。

widthはSVG自体のサイズを指定するもので、viewBoxはSVGに表示する領域を指定します。
上記の場合、座標0,0の位置から200,100の位置までをSVGに表示させるようになります。

viewBox="X軸開始位置 Y軸開始位置 X軸終了位置 Y軸終了位置" SVGに描画する範囲を指定。
SVGのサイズに合わせて中身を拡大・縮小できる。

　

色々な描画する記述

直線や円形などを描画する記述を見てみます。

rect

四角形を描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect width="100" height="200" x="20" y="50" fill="blue"/>
	<rect width="300" height="150" x="150" y="50" rx="50" ry="30" fill="green"/>
</svg>

rectのデモページ

width 幅の指定。
height 高さの指定。
x 四角形の左上のX座標を指定。
y 四角形の左上のY座標を指定。
rx 四隅を角丸にする際のX方向のサイズを指定。
ry 四隅を角丸にする際のY方向のサイズを指定。

line

2つの座標から直線を描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<line x1="50" y1="50" x2="350" y2="200" stroke="blue"/>
</svg>

lineのデモページ

x1 直線開始位置のX座標を指定。
y1 直線開始位置のY座標を指定。
x2 直線終了位置のX座標を指定。
y2 直線終了位置のY座標を指定。

circle

円を描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<circle cx="150" cy="150" r="100" fill="blue"/>
</svg>

circleのデモページ

cx 円の中心のX座標を指定。
cy 円の中心のY座標を指定。
r 円の半径を指定。

ellipse

楕円を描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<ellipse cx="250" cy="150" rx="200" ry="100" fill="blue"/>
</svg>

ellipseのデモページ

cx 円の中心のX座標を指定。
cy 円の中心のY座標を指定。
rx 円のX方向の半径を指定。
ry 円のY方向の半径を指定。

polyline

複数の座標から直線を描画します。
主にパスが開いた図形を描画したいときに使用します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<polyline points="40,40 200,140 160,180 120,160" stroke="blue" fill="none"/>
</svg>

polylineのデモページ

points="X1,Y1 X2,Y2 …" 座標を複数指定。
座標の値の間は,で、各座標の間は半角スペースで区切る。

polygon

複数の座標から直線を描画します。
polylineと違い、開始の座標と終了の座標を自動で繋げるので、パスが閉じた図形を描画したいときに使用します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<polygon points="40,40 200,140 160,180 120,160" stroke="blue" fill="none"/>
</svg>

polygonのデモページ

points="X1,Y1 X2,Y2 …" 座標を複数指定。
座標の値の間は,で、各座標の間は半角スペースで区切る。

path

主に複雑な図形を描画したいときなどに使用します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<path d="M100,50 l-75,75 h50 v50 h50 v-50 h50 l-75,-75" stroke="blue" fill="none"/>
	<path d="M300,50 L250,100 300,150 C350,150 250,150 200,100 S200,150 200,50 a20,20 -30 0 1 50,-25 z" stroke="green" fill="none"/>
</svg>

pathのデモページ

d パスの座標などを複数指定。
先頭につける半角英字によって内容が異なり、座標の値の間は,で、各座標の間は半角スペースで区切る。
半角英字の種類はMoveto, Lineto, Curveto, Arcto, ClosePathがあり、大文字の場合は絶対座標、小文字の場合は相対座標となる。

MX,Y … Movetoの指定。
X,Yの座標から新たなパスを開始する。
LX,Y …
HX …
VY …		 Linetoの指定。
現在の座標からX,Yの座標まで直線を描画する。
水平に直線を引く場合はHまたはhを使ってXを指定、垂直に直線を引く場合はVまたはvを使ってYを指定もできる。
CX1,Y1 X2,Y2 X,Y …
SX2,Y2 X,Y …
QX1,Y1 X,Y …
TX,Y …		 Curvetoの指定。
Cの場合、X1,Y1が曲線の始点に対応する第一制御点、X2,Y2が曲線の終点に対応する第二制御点で、これらを用いて現在の座標からX,Yへ三次ベジェ曲線を描画する。
Sの場合、第一制御点は前の曲線から自動で計算(なければ現在の座標)、X2,Y2が第二制御点で、現在の座標からX,Yへ三次ベジェ曲線を描画する。
Qの場合、X1,Y1が制御点となり、現在の座標からX,Yへ二次ベジェ曲線を描画する。
Tの場合、制御点前の曲線から自動で計算(なければ現在の座標)して、現在の座標からX,Yへ二次ベジェ曲線を描画する。
ArX,rY xAxisRotate LargeArcFlag SweepFlag x,y … Arctoの指定。
rxとryは円弧の半径を指定、xAxisRotateは現在の参照フレームから相対的にx軸を変更、LargeArcFlagは最小(0)と最大(1)の円弧のどちらが描画されるかを指定、SweepFlagは円弧が時計回り(1)か反時計回り(0)で描画されるかを指定で、現在の座標からX,Yへ円弧を描画する。
Z ClosePathの指定。
現在の座標から開始の座標へ直線を描画する。

text

textタグ内に描画したいテキストを指定して、テキストを描画します。
任意のテキストをtspanタグで括ることで、別の見た目や位置などに調整できます。
また、textPathタグを使用することで、テキストを指定したパスに沿って配置することもできます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<text x="50" y="50" id="text">サンプルテキスト</text>
	<text x="50" y="100" id="text" font-size="24" font-weight="bold" font-family="serif" font-style="italic">フォントの装飾</text>
	<text x="50" y="150">サン<tspan dy="-5">プ</tspan><tspan dy="10">ル</tspan><tspan dy="-5">テキスト</tspan></text>
	<text x="240" y="40" text-anchor="start">ABC</text>
	<text x="240" y="80" text-anchor="middle">ABC</text>
	<text x="240" y="120" text-anchor="end">ABC</text>
	<text x="300" y="50" rotate="45">文字の回転</text>
	<text x="50" y="200" textLength="200">文字の間隔</text>
	<defs>
		<path id="path" d="M50,250 h50 l50,20 50,-20 h100">
	</defs>
	<text>
		<textPath xlink:href="#path">テキストのパスを指定するサンプル</textPath>
	</text>
</svg>

textのデモページ

x テキスト左上のX座標を指定。
y テキスト左上のY座標を指定。
dx X座標を移動。
dy Y座標を移動。
text-anchor 指定した方法でテキストを整列させる。
startは指定座標からテキスト開始、middleは指定座標をテキスト中央に、endは指定座標でテキストが終わるようにする。
rotate テキストを1文字ずつ回転する。
textLength 文字間の間隔を調整
xlink:href textPathタグに使用して、パスを指定する。

image

画像を描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="0" />
</svg>

imageのデモページ

width 幅の指定。
height 高さの指定。
x 画像左上のX座標を指定。
y 画像左上のY座標を指定。
xlink:href ファイルパスの指定。

　

少し特殊な描画の記述

上記と少し異なる描画の記述を見てみます。

g

オブジェクトをグループ化します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<g stroke="red" stroke-width="5">
		<rect width="100" height="280" x="20" y="50" fill="blue"/>
		<rect width="300" height="100" x="150" y="50" fill="green"/>
		<rect width="300" height="150" x="150" y="180"/>
	</g>
</svg>

gのデモページ

use

図形のコピーを別の場所に描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect id="rect" width="50" height="50" x="50" y="20" fill="blue"/>
	<use xlink:href="#rect" x="100"/>
	<g id="g">
		<rect width="50" height="100" x="20" y="100" fill="blue"/>
		<rect width="100" height="50" x="100" y="100" fill="green"/>
	</g>
	<use xlink:href="#g" y="120"/>
</svg>

useのデモページ

xlink:href コピー元の指定。

symbol

図形をシンボルとして定義します。
定義した時点ではSVGに表示されないので、useを使って呼び出して描画します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<symbol id="symbol" viewBox="0 0 200 100">
		<circle cx="50" cy="50" r="50" fill="blue"/>
		<circle cx="150" cy="50" r="50" fill="green"/>
	</symbol>
	<use xlink:href="#symbol" x="0" y="0" width="200" height="100"/>
	<use xlink:href="#symbol" x="0" y="100" width="100" height="50"/>
</svg>

symbolのデモページ

viewBox 描画する範囲を指定。

pattern

単体または複数の図形をパターンとして定義して、指定した図形の塗りや線として繰り返し描画することができます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<pattern id="pattern" x="0" y="0" width="20" height="20" patternUnits="userSpaceOnUse">
		<rect width="5" height="5" x="5" y="5" fill="blue"/>
		<rect width="5" height="5" x="15" y="5" fill="green"/>
		<rect width="5" height="5" x="5" y="15" fill="red"/>
		<rect width="5" height="5" x="15" y="15" fill="yellow"/>
	</pattern>
	<rect width="200" height="100" fill="url(#pattern)"/>
	<pattern id="pattern2" width="10" height="10" patternUnits="userSpaceOnUse">
		<polygon points="5 0 10 10 0 10"/>
	</pattern>
	<circle cx="60" cy="180" r="50" fill="url(#pattern2)"/>
</svg>

patternのデモページ

xlink:href 定義したパターンを使用する図形に対して指定。

marker

line,polyline,polygon,pathタグに対して、markerタグで定義した矢印などを付けることができます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<marker id="arrow" viewBox="0 0 10 10" refX="1" refY="5" markerWidth="6" markerHeight="6" orient="auto">
		<path d="M0,0 L10,5 0,10 z"/>
	</marker>
	<line x1="20" y1="80" x2="80" y2="20" stroke="black" stroke-width="2" marker-start="url(#arrow)" marker-end="url(#arrow)"/>
	<polyline points="100,80 150,20 200,20" fill="none" stroke="black" stroke-width="2" marker-mid="url(#arrow)"/>
</svg>

markerのデモページ

markerWidth マーカーの幅を指定。
markerHeight マーカーの高さを指定。
refX マーカーを配置する際の中心になるX座標を指定。
refY マーカーを配置する際の中心になるY座標を指定。
markerUnits strokeWidth:strokeの幅に合わせてマーカーを拡大・縮小する。初期値。
userSpaceOnUse:markerタグで指定したサイズで描画する。
orient マーカーを回転させるかを指定。
数値で角度を指定するか、autoにして線の向きによって自動で回転させるかを指定できる。
marker-start 最初の座標に配置するmarkerタグを指定。
marker-mid 途中(最初と最後以外)の座標に配置するmarkerタグを指定。
marker-end 最後の座標に配置するmarkerタグを指定。

linearGradient・radialGradient

linearGradientタグで線形、radialGradientタグで円形のグラデーションの塗りや線を指定します。
stopタグで途中の色などを指定します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<defs>
		<linearGradient id="sample1" x1="0" y1="0" x2="1" y2="1">
			<stop offset="0" stop-color="#ff0000"/>
			<stop offset="0.5" stop-color="#00ff00"/>
			<stop offset="1" stop-color="#0000ff"/>
		</linearGradient>

		<radialGradient id="sample2" cx="0.5" cy="0.5" r="0.5">
			<stop offset="0" stop-color="#ff0000"/>
			<stop offset="0.5" stop-color="#00ff00"/>
			<stop offset="1" stop-color="#0000ff"/>
		</radialGradient>
	</defs>
	<rect width="200" height="200" fill="url(#sample1)"/>
	<rect width="200" height="200" x="250" y="0" fill="url(#sample2)"/>
</svg>

塗りや線の属性のデモページ

x1 グラデーション開始位置のX座標を指定。
linearGradientに使用。
y1 グラデーション開始位置のY座標を指定。
linearGradientに使用。
x2 グラデーション終了位置のX座標を指定。
linearGradientに使用。
y2 グラデーション終了位置のY座標を指定。
linearGradientに使用。
cx グラデーションの中心のX座標を指定。
radialGradientに使用。
cy グラデーションの中心のY座標を指定。
radialGradientに使用。
r グラデーションの半径を指定。
radialGradientに使用。
fx グラデーションの焦点のX座標を指定。
radialGradientに使用。
fy グラデーションの焦点のY座標を指定
radialGradientに使用。
xlink:href すでに作成しているグラデーションを参照。
linearGradient・radialGradientに使用。
offset stop-colorやstop-opacityを適用する位置を指定。
stopに使用。
stop-color 色を指定。
stopに使用。
stop-opacity 透明度を指定。
stopに使用。

　

塗りや線の属性の記述

すでに今まででも使っていますが、塗り(fill)や線(stroke)を指定する記述を見てみます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect width="100" height="100" x="20" y="20" fill="#0000ff"/>
	<rect width="100" height="100" x="140" y="20" fill="#0000ff" stroke="#ff0000" stroke-width="10"/>
	<rect width="100" height="100" x="260" y="20" fill="#0000ff" fill-opacity="0.5" stroke="#ff0000" stroke-width="10"/>
	<rect width="100" height="100" x="380" y="20" fill="#0000ff" stroke="#ff0000" stroke-width="10" stroke-opacity="0.5"/>
	<rect width="100" height="100" x="20" y="140" fill="#0000ff" stroke="#ff0000" stroke-width="4" stroke-dasharray="10,2"/>
	<rect width="220" height="100" x="140" y="140" fill="#0000ff" stroke="#ff0000" stroke-width="4" stroke-dasharray="10,2,10,15"/>
	<line x1="380" y1="140" x2="480" y2="140" stroke="blue" stroke-width="10" stroke-linecap="butt"/>
	<line x1="380" y1="170" x2="480" y2="170" stroke="blue" stroke-width="10" stroke-linecap="round"/>
	<line x1="380" y1="200" x2="480" y2="200" stroke="blue" stroke-width="10" stroke-linecap="square"/>
	<path d="M380,140 h100 M380,170 h100 M380,200 h100" stroke="white"/>
	<rect width="100" height="100" x="20" y="260" fill="#0000ff" stroke="#ff0000" stroke-width="10" stroke-linejoin="miter"/>
	<rect width="100" height="100" x="140" y="260" fill="#0000ff" stroke="#ff0000" stroke-width="10" stroke-linejoin="round"/>
	<rect width="100" height="100" x="260" y="260" fill="#0000ff" stroke="#ff0000" stroke-width="10" stroke-linejoin="bevel"/>
</svg>

塗りや線の属性のデモページ

fill 塗りつぶしの色を指定。
fill-opacity 塗りつぶしの透明度を指定。
stroke 枠線の色を指定。
stroke-width 枠線の幅を指定。
stroke-opacity 枠線の透明度を指定。
stroke-dasharray 枠線を点線にする際の点線の間隔を指定。
stroke-dasharray=”10,2″ で点線の長さ10px、点線の間隔2pxになる。
stroke-linecap 線の端をどう処理するか指定。
butt:図形の端で終了する。
round:図形の端から線幅の半分だけ伸ばす。
square:端を丸める。
stroke-linejoin 多角形の角をどう処理するか指定。
miter:尖らせる。
round:丸める。
bevel:面取り。

　

styleやscriptをSVG内で使用する

各図形に適用する塗りや線はstyleで指定することもできます。
styleやscriptをSVG内で使用する場合、defsタグの中に記述していきます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<defs>
		<style type="text/css">
		/* <![CDATA[ */
			#sample {
				fill: red;
				stroke: blue;
				stroke-width: 5;
				stroke-dasharray: 10,4;
			}
		/* ]]> */
		</style>
		<script type="text/javascript">
		// <![CDATA[
			window.onload = function() {
				var sample = document.getElementById('sample');
				setInterval(function() {
					var sampleW = parseFloat(sample.getAttribute('width'));
					if(sampleW <= 480) {
						sample.setAttribute('width', sampleW + 1);
					} else {
						sample.setAttribute('width', 150);
					}
				}, 20);
			};
		// ]]>
		</script>
	</defs>
	<rect width="150" height="150" x="10" y="10" id="sample"/>
</svg>

styleやscriptのデモページ

defsタグの中でstyle・scriptタグを記述し、その中を defsタグはstyle・scriptだけでなく、linearGradientやmarker、patternなどを定義する場合にも中に記述できます。
　

リンクの指定

SVG内でリンクを設定します。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<a xlink:href="https://www.google.co.jp/" target="_blank">
		<text x="50" y="50">サンプルテキスト</text>
	</a>
</svg>

リンクのデモページ

　

図形の変形

transformを使って図形を変形します。
使い方はCSS3のtransformとほぼ同じですが、基準座標が図形の左上ではなくSVGの左上？のようなので、XやYで位置をしている場合は位置の調整がしにくいかもしれません。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect width="100" height="100" fill="red" transform="translate(20,20)"/>
	<rect width="100" height="100" x="100" y="20" fill="blue" transform="skewX(30)"/>
	<rect width="100" height="100" x="20" y="100" fill="green" transform="skewY(30)"/>
	<rect width="100" height="100" x="100" y="100" fill="yellow" transform="rotate(45)"/>
	<rect width="100" height="100" x="100" y="100" fill="black" transform="scale(1.5,2)"/>
</svg>

図形の変形のデモページ

transform="translate(X[,Y)"] 図形をX,Yの値だけ移動する。
transform="skewX(a)" X軸を基準にaの角度傾いた平行四辺形状に変形する。
transform="skewY(a)" Y軸を基準にaの角度傾いた平行四辺形状に変形する。
transform="rotate(a)" aの角度回転する。
transform="scale(X[,Y])" 図形をX,Yだけ拡大・縮小する。

　

アニメーションの記述

図形をアニメーションさせる記述を見てみます。

animate

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect width="0" height="20" fill="red">
		<animate attributeName="width" attributeType="XML" from="0" to="200" dur="2s" repeatCount="indefinite"/>
	</rect>

	<rect id="animate" width="50" height="20" y="40" fill="blue"/>
	<animate xlink:href="#animate" attributeName="width" attributeType="XML" from="50" by="150" dur="2s" begin="1s" repeatCount="indefinite"/>

	<rect width="60" height="60" x="220">
		<animate attributeName="fill" attributeType="XML" values="red; blue; green; red" dur="6s" repeatCount="indefinite"/>
	</rect>

	<path d="M20,80 l40,0 0,40 -40,0 0,-40" fill="green">
		<animate attributeName="d" attributeType="XML" values="M20,80 l40,0 0,40 -40,0 0,-40; M40,80 l20,20 -20,20 -20,-20 20,-20; M20,80 l40,0 0,40 -40,0 0,-40" dur="4s" repeatCount="indefinite"/>
		<animate attributeName="fill" attributeType="XML" values="green; red; green" dur="4s" repeatCount="indefinite"/>
	</path>

	<rect width="0" height="20" y="140" fill="#000000">
		<animate attributeName="width" attributeType="XML" values="0; 20; 100; 140; 200" dur="4s" repeatCount="indefinite"/>
	</rect>

	<rect width="0" height="20" y="180" fill="#333333">
		<animate attributeName="width" attributeType="XML" values="0; 20; 100; 140; 200" dur="4s" repeatCount="indefinite" calcMode="discrete"/>
	</rect>

	<rect width="0" height="20" y="220" fill="#666666">
		<animate attributeName="width" attributeType="XML" values="0; 20; 100; 140; 200" dur="4s" repeatCount="indefinite" calcMode="linear"/>
	</rect>

	<rect width="0" height="20" y="260" fill="#999999">
		<animate attributeName="width" attributeType="XML" values="0; 20; 100; 140; 200" dur="4s" repeatCount="indefinite" calcMode="paced"/>
	</rect>

	<rect width="0" height="20" y="300" fill="#cccccc">
		<animate attributeName="width" attributeType="XML" values="0; 20; 100; 140; 200" dur="4s" repeatCount="indefinite" keyTimes="0; 0.1; 0.5; 0.7; 1"/>
	</rect>

	<circle cx="320" cy="20" r="10" fill="red">
		<animate id="animate2" attributeName="cy" attributeType="XML" from="20" to="100" begin="0s; animate3.end" dur="2s"/>
	</circle>
	<circle cx="350" cy="100" r="10" fill="blue">
		<animate id="animate3" attributeName="cy" attributeType="XML" from="100" to="20" begin="animate2.end" dur="2s"/>
	</circle>
	<circle cx="380" cy="40" r="10" fill="green">
		<animate id="animate4" attributeName="cy" attributeType="XML" from="40" to="100" begin="indefinite" dur="2s" restart="whenNotActive"/>
	</circle>
	<a xlink:href="#animate4">
		<text x="365" y="20">移動</text>
	</a>
	<circle cx="425" cy="40" r="10" fill="yellow">
		<animate attributeName="cy" attributeType="XML" from="40" to="100" begin="text.mouseover" dur="2s"/>
	</circle>
	<text id="text" x="410" y="20">移動</text>

	<rect width="50" height="50" x="300" y="150" fill="red">
		<animate attributeName="fill" begin="mouseover" end="mouseout" fill="freeze" values="red; blue; green; red" dur="4s"/>
	</rect>
</svg>

animateのデモページ

パスをアニメーションさせる場合、頂点の数は同じにする必要があります。

attributeName アニメーションさせる属性を指定。
attributeType attributeNameで指定した属性がXMLかCSSかを指定。
from アニメーション開始時の値を指定。
to アニメーション終了時の値を初期値からの差分で指定。
by アニメーション終了時の値を指定。
values アニメーションの通過地点を複数指定したい場合に使用。
値の間は「;」で区切る。
begin 何秒後にアニメーションを開始するかを指定。
指定は数値+sでマイナスの値も指定できる。
mouseoverやmouseoutなど、イベントでも開始タイミングを指定できる。
id.beginやid.endとすることで、指定したidのアニメーション開始時や終了時にアニメーションを実行。
id.eventとすることで、idにJavaScriptでのeventが発生したときにアニメーション実行。
indefiniteを指定しておき、aタグに対してxlink:href=”#id”のようにアニメーションのidを指定することで、aタグをクリックで実行。
end 何秒後にアニメーションを終了するかを指定。
mouseoverやmouseoutなど、イベントでも終了タイミングを指定できる。
fill アニメーション終了後の状態を指定。
removeで開始時の状態に戻す、freezeで終了時の状態を保持する。
dur アニメーションさせる時間を指定。
repeatCount アニメーションを何回繰り返すか指定。
ループさせる場合はindefiniteを指定する。
xlink:href アニメーションする図形を指定。
calcMode valuesでのアニメーションの際、間のアニメーションをどうするか指定。
discrete:アニメーションしない。
linear:各値の間を一定の時間にする。初期値。
paced:各値の間を一定の速度にする。
spline:不明。
keyTimes valuesでの各値の間のアニメーション速度を個別に指定。
restart 再度アニメーションを開始するタイミングを指定。
always:いつでも再開できる。初期値。
whenNotActive:アニメーション中でない時のみ再開できる。
never:1回のみのアニメーション？

animateTransform

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<rect id="animate" width="50" height="50" fill="red"/>
	<animateTransform xlink:href="#animate" attributeName="transform" attributeType="XML" type="skewX" from="0" to="45" dur="2s" repeatCount="indefinite"/>

	<rect width="50" height="50" x="100" y="20" fill="blue">
		<animateTransform attributeName="transform" attributeType="XML" type="rotate" from="0 125 45" by="360" dur="2s" begin="1s" repeatCount="indefinite"/>
	</rect>

	<rect width="50" height="50" x="20" y="70" fill="green">
		<animateTransform attributeName="transform" attributeType="XML" type="translate" values="0,0; 50,50; 100,0; 150,50" dur="2s" repeatCount="indefinite"/>
	</rect>
</svg>

animateTransformのデモページ

attributeName アニメーションさせる属性を指定。
attributeType attributeNameで指定した属性がXMLかCSSかを指定。
type transformの種類を指定。
from アニメーション開始時の値を指定。
to アニメーション終了時の値を初期値からの差分で指定。
by アニメーション終了時の値を指定。
values アニメーションの通過地点を複数指定したい場合に使用。
値の間は「;」で区切る。
begin 何秒後にアニメーションを開始するかを指定。
指定は数値+sでマイナスの値も指定できる。
mouseoverやmouseoutなど、イベントでも開始タイミングを指定できる。
id.beginやid.endとすることで、指定したidのアニメーション開始時や終了時にアニメーションを実行。
id.eventとすることで、idにJavaScriptでのeventが発生したときにアニメーション実行。
indefiniteを指定しておき、aタグに対してxlink:href=”#id”のようにアニメーションのidを指定することで、aタグをクリックで実行。
end 何秒後にアニメーションを終了するかを指定。
mouseoverやmouseoutなど、イベントでも終了タイミングを指定できる。
fill アニメーション終了後の状態を指定。
removeで開始時の状態に戻す、freezeで終了時の状態を保持する。
dur アニメーションさせる時間を指定。
repeatCount アニメーションを何回繰り返すか指定。
ループさせる場合はindefiniteを指定する。
xlink:href アニメーションする図形を指定。
calcMode valuesでのアニメーションの際、間のアニメーションをどうするか指定。
discrete:アニメーションしない。
linear:各値の間を一定の時間にする。初期値。
paced:各値の間を一定の速度にする。
spline:不明。
keyTimes valuesでの各値の間のアニメーション速度を個別に指定。
restart 再度アニメーションを開始するタイミングを指定。
always:いつでも再開できる。初期値。
whenNotActive:アニメーション中でない時のみ再開できる。
never:1回のみのアニメーション？

animateMotion

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<path d="M10,110 A120,120 -45 0 1 110,10 A120,120 -45 0 1 10,110" stroke="black" stroke-width="2" fill="none" id="path"/>
	<circle cx="0" cy="0" r="6" fill="blue">
		<animateMotion dur="4s" repeatCount="indefinite">
			<mpath xlink:href="#path"/>
		</animateMotion>
	</circle>

	<rect width="10" height="10" x="0" y="0" fill="red">
		<animateMotion path="M150,110 A120,120 -45 0 1 250,10 A120,120 -45 0 1 150,110" dur="4s" rotate="auto" repeatCount="indefinite"/>
	</rect>

	<circle cx="0" cy="0" r="6" fill="green">
		<animateMotion path="M290,110 A120,120 -45 0 1 390,10 A120,120 -45 0 1 290,110" dur="4s" repeatCount="indefinite" calcMode="linear" keyPoints="0; 0.5; 1" keyTimes="0; 0.2; 1"/>
	</circle>
</svg>

animateMotionのデモページ

path 図形が移動するパスを指定。
begin 何秒後にアニメーションを開始するかを指定。
指定は数値+sでマイナスの値も指定できる。
mouseoverやmouseoutなど、イベントでも開始タイミングを指定できる。
id.beginやid.endとすることで、指定したidのアニメーション開始時や終了時にアニメーションを実行。
id.eventとすることで、idにJavaScriptでのeventが発生したときにアニメーション実行。
indefiniteを指定しておき、aタグに対してxlink:href=”#id”のようにアニメーションのidを指定することで、aタグをクリックで実行。
end 何秒後にアニメーションを終了するかを指定。
mouseoverやmouseoutなど、イベントでも終了タイミングを指定できる。
fill アニメーション終了後の状態を指定。
removeで開始時の状態に戻す、freezeで終了時の状態を保持する。
dur アニメーションさせる時間を指定。
rotate 図形を回転させるかを指定。
autoの場合はパスの向きに合わせて自動で回転、auto-reverseの場合は反対を向くように回転。
repeatCount アニメーションを何回繰り返すか指定。
ループさせる場合はindefiniteを指定する。
xlink:href 図形が移動するパスを指定。
keyPoints pathで指定しているパス全体を1として、パスを分割する。
calcMode keyPointsを指定している際、間のアニメーションをどうするか指定。
discrete:アニメーションしない。
linear:各値の間を一定の時間にする。
paced:各値の間を一定の速度にする。初期値。
spline:不明。
keyTimes keyPointsでの各値の間のアニメーション速度を個別に指定。
restart 再度アニメーションを開始するタイミングを指定。
always:いつでも再開できる。初期値。
whenNotActive:アニメーション中でない時のみ再開できる。
never:1回のみのアニメーション？

　

clipPathの指定

クリッピングパスを指定してみます。

HTML

<svg width="500" height="500" viewBox="0 0 500 500">
	<clipPath id="sample1">
		<circle cx="100" cy="75" r="50"/>
	</clipPath>
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="0" clip-path="url(#sample1)"/>

	<clipPath id="sample2">
		<text x="250" y="70" font-size="30px" font-weight="bold">サンプル</text>
		<text x="250" y="100" font-size="30px" font-weight="bold">テキスト</text>
	</clipPath>
	<image xlink:href="01.jpg" width="200" height="150" x="200" y="0" clip-path="url(#sample2)"/>

	<mask id="sample3">
		<circle cx="50" cy="200" r="50" fill="#cccccc"/>
		<rect width="150" height="100" x="50" y="200" fill="#333333"/>
	</mask>
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="150" mask="url(#sample3)"/>
</svg>

clipPathのデモページ

clip-path クリッピングマスクで使用する要素の指定。
mask マスクで使用する要素の指定。

　

filterの指定

フィルターは量が多そうなので、いくつかピックアップして試してみます。

HTML

<svg width="650" height="500" viewBox="0 0 650 500">
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="0" />

	<filter id="sample1" x="0" y="0" width="200" height="150">
		<feGaussianBlur stdDeviation="3" />
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="220" y="0" filter="url(#sample1)" />

	<filter id="sample2" x="0" y="0" width="200" height="150">
		<feColorMatrix type="hueRotate" values="30" />
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="440" y="0" filter="url(#sample2)" />

	<filter id="sample3" x="0" y="0" width="200" height="150">
		<feColorMatrix type="saturate" values="0" />
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="170" filter="url(#sample3)" />

	<filter id="sample4" x="0" y="0" width="200" height="150">
		<feComponentTransfer>
			<feFuncR type="linear" slope="0.5" intercept="0.6"/>
			<feFuncG type="linear" slope="0" intercept="0"/>
			<feFuncB type="linear" slope="0.5" intercept="0.25"/>
		</feComponentTransfer>
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="220" y="170" filter="url(#sample4)" />

	<filter id="sample5" x="0" y="0" width="200" height="150">
		<feComponentTransfer>
			<feFuncR type="gamma" amplitude="2" exponent="4" offset="0"/>
			<feFuncG type="gamma" amplitude="2" exponent="2" offset="0"/>
			<feFuncB type="gamma" amplitude="2" exponent="1" offset="0"/>
		</feComponentTransfer>
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="440" y="170" filter="url(#sample5)" />

	<filter id="sample6" x="0" y="0" width="200" height="150">
		<feMorphology operator="erode" in="SourceGraphic" radius="3"/>
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="0" y="340" filter="url(#sample6)" />

	<filter id="sample7" x="0" y="0" width="200" height="150">
		<feMorphology operator="dilate" in="SourceGraphic" radius="3"/>
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="220" y="340" filter="url(#sample7)" />

	<filter id="sample8" x="0" y="0" width="200" height="150">
		<feTurbulence type="turbulence" baseFrequency="0.05" numOctaves="2"/>
	</filter>
	<image xlink:href="01.jpg" width="200" height="150" x="440" y="340" filter="url(#sample8)" />
</svg>

filterのデモページ

filter フィルターで使用する要素の指定。
stdDeviation ぼかしを指定。
type フィルターの種類を指定。

　

最後の方力尽きてしまいましたが、そのうち残っているSVGの要素や属性も試してみたいと思います。
　

【参考サイト】

　

このエントリーをはてなブックマークに追加

関連記事

コメントを残す

メールアドレスが公開されることはありません。
* が付いている欄は必須項目です

CAPTCHA


コメントが承認されるまで時間がかかります。

Category

Tag

Recent

2024年11月
日 月 火 水 木 金 土
 12
3456789
10111213141516
17181920212223
24252627282930